今天給大家實現(xiàn)一個可擴展的，靈活的輪播圖淡入淡出效果盟蚣，注意：此插件依賴jquery逞怨；直接看代碼碘橘。
1.參數(shù)配置
ulClass ---包裹每個輪播圖的容器類名，默認img
numClass ---包裹輪播圖底部頁碼控制的容器類名碉钠，默認num
btnL ---上一張按鈕類名纲缓，默認btn_l
btnR ---下一張按鈕類名，默認btn_r
bannerWidth ---輪播圖寬度喊废，number祝高，默認0
timeInterval ---輪播的時間間隔，默認2秒切換一張banner污筷，number
slideSpeed ---輪播的速度(一張切到另一張的動畫持續(xù)時間)工闺，默認500ms，number
2.插件代碼
;(function($,window,document,undefined){
$.fn.bannerSlide=function(options){
var ulClass = options.ulClass?("."+options.ulClass):'.img'; //包裹每個輪播圖的容器類名
var numClass = options.numClass?("."+options.numClass):'.num'; //包裹輪播圖底部頁碼控制的容器類名
var btnL = options.btnL?("."+options.btnL):'.btn_l'; //上一張按鈕
var btnR = options.btnR?("."+options.btnR):'.btn_r'; //下一張按鈕
var bannerWidth = options.bannerWidth?options.bannerWidth:0; //輪播圖寬度瓣蛀，number
var timeInterval = options.timeInterval?options.timeInterval:2000; //輪播的時間間隔陆蟆，默認2秒切換一張banner，number
var slideSpeed = options.slideSpeed?options.slideSpeed:500; //輪播的速度(一張切到另一張的動畫持續(xù)時間)惋增，默認500ms叠殷，number
var $that = this;
var i=0;
//克隆節(jié)點，以實現(xiàn)無縫輪播
var clone=this.find(ulClass+" li").first().clone();
this.find(ulClass).append(clone);
var size=this.find(ulClass+" li").size();
for(var j=0;j<size-1;j++){
this.find(numClass).append("<li></li>");
}
this.find(numClass+" li").first().addClass("on");
/*鼠標劃入圓點*/
this.find(numClass+" li").hover(function(){
var index=$(this).index();
i=index;
$that.find(ulClass).stop().animate({left:-index*bannerWidth},slideSpeed);
$(this).addClass("on").siblings().removeClass("on");
})
/*自動輪播*/
var t=setInterval(function(){
i++;
move()
},timeInterval);
/*對banner定時器的操作*/
this.hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move()
},timeInterval)
})
/*向左的按鈕*/
this.find(btnL).click(function(){
i--;
move();
})
/*向右的按鈕*/
this.find(btnR).click(function(){
i++;
move();
})
function move(){
if(i==size){
$that.find(ulClass).css({left:0});
i=1;
}
if(i==-1){
$that.find(ulClass).css({left:-(size-1)*bannerWidth});
i=size-2;
}
$that.find(ulClass).stop().animate({left:-i*bannerWidth},slideSpeed);
if(i==size-1){
$that.find(numClass+" li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$that.find(numClass+" li").eq(i).addClass("on").siblings().removeClass("on");
}
}
};
})(jQuery);
3.調(diào)用方式
參數(shù)都是可選的器腋，不傳則為默認的
$(".banner").bannerSlide({
'bannerWidth':550,
'timeInterval':1000
});
$(".banner2").bannerSlide({
'bannerWidth':550,
'timeInterval':3000,
'slideSpeed':0.1 //相當于瞬間切換
});
4.示例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無縫輪播</title>
<style>
*{ padding:0; margin:0; list-style:none;}
.banner{ margin:100px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden; position:relative;}
.banner .img{ width:5000px; position:absolute; left:0px; top:0;}
.banner .img li{ float:left;}
.banner .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}
.banner .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}
.banner .num li.on{ background:#F60;}
.banner .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋體"; display:none;}
.banner:hover .btn{ display:block;}
.banner .btn_l{ left:0;}
.banner .btn_r{ right:0;}
.bannercss{ margin:100px auto; border:5px solid #000; width:550px; height:300px; overflow:hidden; position:relative;}
.bannercss .img{ width:5000px; position:absolute; left:0px; top:0;}
.bannercss .img li{ float:left;}
.bannercss .num{ position:absolute; width:100%; bottom:10px; left:0; text-align:center; font-size:0px;}
.bannercss .num li{ width:10px;height:10px; background:#888; border-radius:50%; display:inline-block; margin:0 3px; cursor:pointer;}
.bannercss .num li.on{ background:#F60;}
.bannercss .btn{ width:30px; height:50px; background:rgba(0,0,0,0.5); position:absolute; top:50%; margin-top:-25px; cursor:pointer; text-align:center; line-height:50px; color:#fff; font-size:40px; font-family:"宋體"; display:none;}
.bannercss:hover .btn{ display:block;}
.bannercss .btn_l{ left:0;}
.bannercss .btn_r{ right:0;}
</style>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
;(function($,window,document,undefined){
$.fn.bannerSlide=function(options){
var ulClass = options.ulClass?("."+options.ulClass):'.img'; //包裹每個輪播圖的容器類名
var numClass = options.numClass?("."+options.numClass):'.num'; //包裹輪播圖底部頁碼控制的容器類名
var btnL = options.btnL?("."+options.btnL):'.btn_l'; //上一張按鈕
var btnR = options.btnR?("."+options.btnR):'.btn_r'; //下一張按鈕
var bannerWidth = options.bannerWidth?options.bannerWidth:0; //輪播圖寬度溪猿，number
var timeInterval = options.timeInterval?options.timeInterval:2000; //輪播的時間間隔钩杰，默認2秒切換一張banner纫塌，number
var slideSpeed = options.slideSpeed?options.slideSpeed:500; //輪播的速度(一張切到另一張的動畫持續(xù)時間)，默認500ms讲弄，number
var $that = this;
var i=0;
//克隆節(jié)點措左，以實現(xiàn)無縫輪播
var clone=this.find(ulClass+" li").first().clone();
this.find(ulClass).append(clone);
var size=this.find(ulClass+" li").size();
for(var j=0;j<size-1;j++){
this.find(numClass).append("<li></li>");
}
this.find(numClass+" li").first().addClass("on");
/*鼠標劃入圓點*/
this.find(numClass+" li").hover(function(){
var index=$(this).index();
i=index;
$that.find(ulClass).stop().animate({left:-index*bannerWidth},slideSpeed);
$(this).addClass("on").siblings().removeClass("on");
})
/*自動輪播*/
var t=setInterval(function(){
i++;
move()
},timeInterval);
/*對banner定時器的操作*/
this.hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move()
},timeInterval)
})
/*向左的按鈕*/
this.find(btnL).click(function(){
i--;
move();
})
/*向右的按鈕*/
this.find(btnR).click(function(){
i++;
move();
})
function move(){
if(i==size){
$that.find(ulClass).css({left:0});
i=1;
}
if(i==-1){
$that.find(ulClass).css({left:-(size-1)*bannerWidth});
i=size-2;
}
$that.find(ulClass).stop().animate({left:-i*bannerWidth},slideSpeed);
if(i==size-1){
$that.find(numClass+" li").eq(0).addClass("on").siblings().removeClass("on");
}else{
$that.find(numClass+" li").eq(i).addClass("on").siblings().removeClass("on");
}
}
};
})(jQuery);
$(function(){
$(".banner").bannerSlide({
'bannerWidth':550,
'timeInterval':1000
});
$(".banner2").bannerSlide({
'bannerWidth':550,
'timeInterval':3000,
'slideSpeed':0.1 //相當于瞬間切換
});
});
</script>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.jpg"></a></li>
<li><a href="#"><img src="images/3.jpg"></a></li>
<li><a href="#"><img src="images/4.jpg"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
<div class="banner2 bannercss">
<ul class="img">
<li><a href="#"><img src="images/1.jpg"></a></li>
<li><a href="#"><img src="images/2.jpg"></a></li>
<li><a href="#"><img src="images/3.jpg"></a></li>
<li><a href="#"><img src="images/4.jpg"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
</html>
