jquery广告轮播插件
大家平时在项目中很多时候也用到广告轮播图，我也不例外，为了避免重复工作，自己编写了一个兼容所有浏览器的广告轮播插件，调用非常简单。（ps:可以很灵活的修改，以满足不同的需求）
js代码：
(function($){
$.fn.ban=function(options){
var defaults={
maxClass:"b_max",
minClass:"b_min",
maxHeight:"256"
};
options=$.extend(defaults,options);
var maxClass=$("."+options.maxClass);
var minClass=$("."+options.minClass);
var max_len=maxClass.find("li").length;
var picTimer,num=0;
return this.each(function(index){
$(this).hover(function(){
clearInterval(picTimer);
},function(){
picTimer=setInterval(function(){
if(num == max_len) {
picMoveFirst();
num=0;
} else {
picMoves(num);
}
num++;
},3000);
}).trigger("mouseleave");
minClass.find("li").each(function(index){
$(this).bind("click",function(){
picMoves(index);
num=index;
});
});
});
function picMoves(index) { //普通切换
minClass.find("a").removeClass().eq(index).addClass("current");
maxClass.find("ul").animate({"top":-options.maxHeight*index});
}
function picMoveFirst(){
maxClass.find("ul").append(maxClass.find("li:first").clone());
maxClass.find("ul").stop(true,false).animate({"top":-options.maxHeight*max_len},300,function(){
maxClass.find("ul").css("top","0");
maxClass.find("li:last").remove();
});
minClass.find("a").removeClass("current").eq(0).addClass("current");
}
}
})(jQuery);
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <link href="css/global.css" rel="stylesheet">-->
<style type="text/css">
*{padding: 0;margin: 0;}
ul,ol{list-style: none;}
img{border: 0 none;vertical-align: middle;}
.banner{position:relative;width: 760px;height: 256px;background: #87ceeb;}
.b_max{width: 640px;height: 256px;position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;}
.b_max li,.b_max li a,.b_max li a img{width: 640px;height: 256px;}
.b_max ul{position: absolute;top: 0;left: 0;}
.b_min{position: absolute;right: 0;top: 0;z-index: 1;background:#000;}
.b_min ul{width: 160px;}
.b_min img{opacity:0.65; filter:alpha(Opacity=65);}
.b_min .current img{opacity: 1;filter:alpha(Opacity=100);}
.b_min li,.b_min li a,.b_min li a img{width: 160px;height: 64px;}
</style>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.ban.js"></script>
<script type="text/javascript">
$(function(){
$("#banner").ban();
});
</script>
</head>
<body>
<!--banner s-->
<div id="banner" class="banner">
<div class="b_max">
<ul>
<li><a href="#"><img src="images/b1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/b2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/b3.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/b4.jpg" alt="" /></a></li>
</ul>
</div>
<div class="b_min">
<ul>
<li><a href="javascript:;" class="current"><img src="images/b1.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/b2.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/b3.jpg" alt="" /></a></li>
<li><a href="javascript:;"><img src="images/b4.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<!--banner e-->
</body>
</html>
讲解一下：
var defaults={
maxClass:"b_max",
minClass:"b_min",
maxHeight:"256"
};
这里插件调用时，假如不传出自己定义的参数，插件就默认调用上面的参数，maxClass是轮播大图列表的最外层div的样式，minClass是小图列表的最外层div的样式，maxHeight是每张大图的高度（ps：这里是垂直方向的切）
$(function(){
$("#banner").ban();
});
这个就是默认不传参数时的调用，
假如你自己定义了自己的样式，例如：现在你html里面轮播大图列表的最外层div的样式为ban_max1,小图列表的最外层div的样式为ban_min1,每张大图的高度是200时
插件可以这样很方便的调用；
$(function(){
$("#banner").ban({
maxClass:"ban_max1",
minClass:"ban_min1",
maxHeight:"200"
});
});
当然这里的$("#banner")也可以自定义；希望能对看到的人有所帮助，有不同看法的欢迎交流，可以加qq交流：651680272
