您的位置：首页 > Web前端 > JQuery

基于jquery的轮播图插件

2017-08-14 12:01 295 查看

基于jQuery的轮播图插件（无缝切换）

思路是将所有li定位，将要开始显示的li用css({left:})来显示到要开始滑动的地方，接下来开始滑动

贴上代码

HTML

<body>
<div class="wrap">
<ul id="scroll">
<li><img src="images/1.jpg" alt="1"></li>
<li><img src="images/2.jpg" alt="2"></li>
<li><img src="images/3.jpg" alt="3"></li>
<li><img src="images/4.jpg" alt="4"></li>
</ul>
<div class="butt">
<button id="prev"><</button>
<button id="next">></button>
</div>
<div>
<ul id="dots">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>

CSS

<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.wrap{
width: 1080px;
height: 432px;
margin: 30px auto;
overflow: hidden;
position: relative;
}
#scroll{
width: 100%;
height: 432px;
position: absolute;

}
#scroll li{
float: left;
width: 1080px;
height: 432px;
position: absolute;
left: 1080px;
}
#scroll li:nth-child(1){
left: 0;
}
.butt{
width: 100%;
position: absolute;
top: 40%;
}
.butt button{
width: 50px;
height: 80px;
background: #9c9a9a;
color: #FFF;
border: 0;
outline: none;
opacity: 0.5;
font-size: 30px;
cursor: pointer;
}
#prev{
float: left;
}
#next{
float: right;
}
#dots{
width: 180px;
height: 20px;
position: absolute;
bottom: 10px;
right: 40%;

}
#dots li{
float: left;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 10px;
margin-right: 30px;
background-color: red;

}
#dots li.active{
background-color: #fff;
}
</style>

jquery代码（记住要先引入jQuery文件）

(function($){
$.fn.extend({
scroll: function(options){ // 参数是对象，preB指的是向前按钮，nextB是向后按钮，dotsDiv是焦点div,parDiv是指轮播图的父元素，dis是一次移动的距离，speed是滑动的速度，autospeed是隔几秒自动播放
var defaultSetting = {
prevB : null,
nextB : null,
dotsDiv : null,
parDiv : null,
dis : null,
speed : null,
autoSpeed : null
}

var settings = $.extend({}, defaultSetting, options);

var that=this;
var index=0;
var status=true;
var timer=null;

//小圆点class变化
function active(index){

$(settings.dotsDiv).children('li').removeClass('active');
$(settings.dotsDiv).children('li').eq(index).addClass('active');

};
//为小圆点添加点击事件
$(settings.dotsDiv).children('li').click(function(){
var this_index=$(this).index();
if(status==true){
status=false;
if(this_index>index){
$(that).children('li').eq(index).animate({left:-settings.dis+'px'},settings.speed);
$(that).children('li').eq(this_index).css({left:settings.dis+'px'});
$(that).children('li').eq(this_index).animate({left:'0px'},settings.speed,function(){
status=true;
});
index = this_index;
active(index);
}else if(this_index<index){
$(that).children('li').eq(index).animate({left: settings.dis+'px'},settings.speed);
$(that).children('li').eq(this_index).css({left: -settings.dis+'px'});
$(that).children('li').eq(this_index).animate({left: '0px'},settings.speed,function(){
status=true;
});
index=this_index;
active(index);
}else{
status=true;

}
};
});

//为向前按钮添加点击事件
$(settings.prevB).click(function(){
prevPlay();

});

//为向后按钮添加点击事件
$(settings.nextB).click(function(){
nextPlay();
});
//向前播放函数
function prevPlay(){
if(status==true){
status=false;
$(that).children('li').eq(index).animate({left: settings.dis+'px'},settings.speed);
index--;
if(index<0){
index= $(that).children('li').length-1;
}
$(that).children('li').eq(index).css({left:-settings.dis+'px'});
$(that).children('li').eq(index).animate({left:'0px'},settings.speed,function(){status = true;});
active(index);
}
}
//向后播放函数
function nextPlay(){
if(status==true){
status=false;

$(that).children('li').eq(index).animate({left: -settings.dis+'px'},settings.speed);
index++;
if(index==$(that).children('li').length){
index= 0;
}
$(that).children('li').eq(index).css({left:settings.dis+'px'});
$(that).children('li').eq(index).animate({left:'0px'},settings.speed,function(){status = true;});
active(index);
}
}
//自动播放函数
function autoPlay(){
timer = setInterval(nextPlay, settings.autoSpeed);

}
//移动到轮播图上，停止自动播放
//移出轮播图时恢复自动播放
$(settings.parDiv).mouseover(function(){
clearInterval(timer);
timer = null;
}).mouseout(function() {
autoPlay();
});

//页面加载自动播放
autoPlay();

return this;
}

})

})(jQuery);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 插件

相关文章推荐

新的分享

章节导航