超炫百叶窗轮播广告幻灯片插件

超炫百叶窗轮播广告幻灯片插件

今天偶然发现一个jquery轮播广告插件很不错,效果很炫,堪比Flash轮播广告效果,赶紧上来分享给大家。

插件名开发者博客地址:Camera 


这个幻灯片每次切换都是随机调用他设置的特效,所以各种混合切换的效果还是不错的。我们先来看下怎么调用吧:


html代码:

<div class="camera_wrap" id="camera_wrap_1">
    <div data-src="img/1.jpg"></div>
    <div data-src="img/2.jpg"></div>
    <div data-src="img/3.jpg"></div>                                        
</div>


页面头部引入插件:

<link rel="stylesheet" id="camera-css"  href="css/camera.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/camera1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>


jquery调用方法

$(function(){	
	$('#camera_wrap_1').camera();	
});


这个插件看起来挺复杂的,实际调用还是非常简单的,不过这个特效就是稍微大了点,如果要做特效网站的同学可以考虑尝试一下。


github地址:https://github.com/owen-hong/camera-slider 

下载地址:https://github.com/owen-hong/camera-slider/archive/master.zip 


转载请注明来自 520UED http://www.520ued.com/article/53882a7fb992a7c43f5c2048

comments powered by Disqus