可重複呼叫輪播圖
js部分
(function($){
$.fn.slideshow = function(settings){
var defaultSettings = {
autoplay:false,//自動播放
type:'click'//小圓點執行方式 點選:click 滑鼠懸浮:mouseover
};
settings = $.extend(true, {}, defaultSettings, settings);
return this.each(function(){
var _this = $(this);
var s = settings;
var time;//自動播放
var _ul = $('.slide-ul',_this);
var _ul_li = $('.slide-ul li',_this);
var _ol = $('.slide-ol',_this);
var _slide_btn = $('.slide-btn',_this);
var num1 = 0;//小圓點計數器
var num2 = 0;//圖片計數器
var _li_size = _ul_li.length;
var _width = _ul_li.width();
_ul.width(_width*_li_size);
$.each(_ul_li, function(i) {//新增小圓點
if( i == 0){
_ol.append("<li class='curr'>"+(i+1)+"</li>");
}else{
_ol.append("<li>"+(i+1)+"</li>");
}
});
var _ol_li = $('.slide-ol li',_this);
_ol_li.on(s.type,function(event) {
var $this = $(this);
num2 = $this.index();
num1 = $this.index();
$this.addClass('curr').siblings('li').removeClass('curr');
_ul.stop(true,true).animate({left:-_width*$this.index()});
});
_slide_btn.click(function(){//點選左右按鈕，如果不處於動畫中則執行
var $this = $(this);
if (!(_ul.is(':animated'))) {
if($this.attr('fx') == 'left'){
goLeft();
}else{
goRight();
}
}
});
function goRight(){
if(num1 == _li_size-1){
_ul_li.eq(0).css({
'position':'relative',
'left':_ul.width()
});
num1 = 0;
}else{
num1 ++;
}
num2 ++;
_ol_li.eq(num1).addClass('curr').siblings('li').removeClass('curr');
_ul.animate({left: -num2*_width}, 500,function(){
if(num1 == 0){
_ul_li.eq(0).css("position","static");
_ul.css("left",0);
num2 = 0;
}
});
};
function goLeft(){
if(num1 == 0){
_ul_li.eq(_li_size - 1).css({
'position':'relative',
'left':-_ul.width()
});
num1 = _li_size - 1;
}else{
num1 -- ;
}
num2 --;
_ol_li.eq(num1).addClass('curr').siblings('li').removeClass('curr');
_ul.animate({left: -_width*num2}, 500,function(){
if(num1 == _li_size - 1){
_ul_li.eq(_li_size - 1).css('position','static');
_ul.css('left',-(_ul.width()-_width));
num2 = _li_size-1;
}
})
};
if (s.autoplay) {
time = setInterval(goRight,1500);
_ul.parent('div').hover(function() {
clearInterval(time);
}, function() {
time = setInterval(goRight,1500);
});
}
});
};
})(jQuery)
html部分
<body>
<div class="slide-box demo1">
<ul class="slide-ul">
<li><a href="#"><img src="1.jpg" alt=""></a></li>
<li><a href="#"><img src="2.jpg" alt=""></a></li>
<li><a href="#"><img src="3.jpg" alt=""></a></li>
</ul>
<ol class="slide-ol"></ol>
<span class="slide-btn slide-prev" fx="left">左</span>
<span class="slide-btn slide-next" fx="right">右</span>
</div>
<script>
$(".demo1").slideshow({
autoplay:true,
type:'mouseover'
});
</script>
</body>
css部分
*{margin: 0 ;padding: 0; font-family: "微軟雅黑";}
li{list-style: none;}
img{border: none;}
.slide-box{position: relative;width: 700px; height: 300px; overflow: hidden;margin: 100px auto;}
.slide-ul{height: 300px; position: absolute;z-index: 9;}
.slide-ul>li{width: 700px;height: 300px;float: left;}
.slide-ol{position: absolute;bottom: 10px; z-index: 10;}
.slide-ol>li{display: inline-block;width: 20px;height: 20px;background: #000;color: #fff;text-align: center;line-height: 20px; cursor: pointer; margin-left: 5px;}
.slide-ol>li.curr{color: #000;background: #fff;}
.slide-btn{position: absolute;top: 40%;z-index: 10;width: 30px;height: 30px;line-height: 30px;text-align: center;background: #eee;cursor: pointer;border: 1px solid #ff7800;border-radius: 5px;}
.slide-prev{left: 10px;}
.slide-next{right: 10px;}