jq封装淘宝图片轮播插件
<!DOCTYPE html>
<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;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.slideshow=function(opt){
var defaults={
'autoclick':'click', //小圆点事件
'slideclick':'click',//左右按钮事件
'autotime':2000 //轮播速度
};
$.extend(defaults,opt);
return this.each(function(){
var $this=$(this);
var i=0;
var clone=$this.find(".img li").first().clone();
$this.find(".img").append(clone);
var size=$this.find(".img li").size();
for(var j=0;j<size-1;j++){
$this.find(".num").append("<li></li>");
}
$this.find(".num li").first().addClass("on");
/*鼠标划入圆点*/
$this.find(".num li").on(defaults.autoclick,function(){
var index=$(this).index();
i=index;
$this.find(".img").stop().animate({left:-index*550},500)
$(this).addClass("on").siblings().removeClass("on")
})
/*自动轮播*/
var t=setInterval(function(){
i++;
move()
},defaults.autotime)
/*对banner定时器的操作*/
$this.hover(function(){
clearInterval(t);
},function(){
t=setInterval(function(){
i++;
move()
},defaults.autotime)
})
/*向左的按钮*/
$this.find(".btn_l").on(defaults.slideclick,function(){
i++
move();
})
/*向右的按钮*/
$this.find(".btn_r").on(defaults.slideclick,function(){
i--
move()
})
function move(){
if(i==size){
$this.find(".img").css({left:0})
i=1;
}
if(i==-1){
$this.find(".img").css({left:-(size-1)*550})
i=size-2;
}
$this.find(".img").stop().animate({left:-i*550},500)
if(i==size-1){
$this.find(".num li").eq(0).addClass("on").siblings().removeClass("on")
}else{
$this.find(".num li").eq(i).addClass("on").siblings().removeClass("on")
}
}
})
}
})(jQuery);
//调用
$(function(){
$('.banner1').slideshow({
'autoclick':'mouseenter',
'autotime':1000
});
$('.banner2').slideshow({
'autoclick':'click',
'slideclick':'mouseenter'
});
})
</script>
</head>
<body>
<div class="banner banner1">
<ul class="img">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
<div class="banner banner2">
<ul class="img">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
</ul>
<ul class="num">
</ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
</body>
</html>
