大小变动的banner,每轮播或点击一次,看看有啥变化。该轮播插件很新颖,提供给大家学习.
banner列表
<div class="banner">
<ul class="banList">
<li class="active"><a href="http://www.sucaihuo.com/"><img src="images/img1.jpg"/></a></li>
<li><a href="http://www.sucaihuo.com/"><img src="images/img2.jpg"/></a></li>
<li><a href="http://www.sucaihuo.com/"><img src="images/img3.jpg"/></a></li>
</ul>
<div class="fomW">
<div class="jsNav">
<a href="javascript:;" class="trigger current"></a>
<a href="javascript:;" class="trigger"></a>
<a href="javascript:;" class="trigger"></a>
</div>
</div>
</div>
banner插件
(function ($) {
$.fn.swBanner=function(options){
var defaults={
animateTime:300,
delayTime:5000
}
var setting=$.extend({},defaults,options);
return this.each(function(){
$obj=$(this);
var o=setting.animateTime;
var d=setting.delayTime;
var $oban=$obj.find(".banList li");
var _len=$oban.length;
var $nav=$obj.find(".fomW a");
var _index=0;
var timer;
//图片轮换
function showImg(n){
$oban.eq(n).addClass("active").siblings().removeClass("active");
$nav.eq(n).addClass("current").siblings().removeClass("current");
}
//自动播放
function player(){
timer=setInterval(function(){
var _index=$obj.find(".fomW").find("a.current").index();
showImg((_index+1)%_len);
},d)
}
//
$nav.click(function(){
if(!($oban.is(":animated"))){
_index=$(this).index();
showImg(_index);
}
});
//
$oban.hover(function(){
clearInterval(timer);
},function(){
player();
});
player();
});
}
})(jQuery);
调用banner,
$(function(){
$(".banner").swBanner();
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791