jquery插件编写——轮播图淡入淡出（支持灵活配置）
2016-03-05 本文已影响646人
webCoder
今天给大家实现一个可扩展的，灵活的轮播图淡入淡出效果，注意：此插件依赖jquery；直接看代码。
1.参数配置
ulClass ---包裹每个轮播图的容器类名，默认img
numClass ---包裹轮播图底部页码控制的容器类名，默认num
btnL ---上一张按钮类名，默认btn_l
btnR ---下一张按钮类名，默认btn_r
bannerWidth ---轮播图宽度，number，默认0
timeInterval ---轮播的时间间隔，默认2秒切换一张banner，number
slideSpeed ---轮播的速度(一张切到另一张的动画持续时间)，默认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; //轮播的速度(一张切到另一张的动画持续时间)，默认500ms，number
var $that = this;
var i=0;
//克隆节点，以实现无缝轮播
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.调用方式
参数都是可选的，不传则为默认的
$(".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; //轮播的速度(一张切到另一张的动画持续时间)，默认500ms，number
var $that = this;
var i=0;
//克隆节点，以实现无缝轮播
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>
