全部用jquery写的无缝左右滑动轮播图
这里的圆点的html代码是通过js实现的，全jquery实现无缝轮播
1、html代码
<
>
2、css代码
div.banner{
display:block;
position: relative;
margin:0 auto;
width:1200px;
height:535px;
margin-top:30px;
overflow: hidden;
z-index: 1;
}
.imgs{
position: absolute;
top: 0;
left: 0;
}
.des{
position: absolute;
bottom: 0;
left: 0;
z-index: -2;
background: #ccc;
}
.des li{
float: left;
width: 1200px;
}
.imgs li{
float: left;
}
.nums{
position: absolute;
bottom: 10px;width: 100%;
text-align: center;
font-size: 0;
}
.nums li{
width: 10px;
height: 10px;
background:rgba(0,0,0,0.5);
display: block;
border-radius: 100%;
display: inline-block;
margin: 0 5px;
cursor: pointer;
}
.btns{
display: none;
}
.btns span{
display: block;
width: 50px;
height: 100px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 40px;
line-height: 100px;
text-align: center;
cursor:pointer;
}
.btns .prev{
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
}
.btns .next{
position: absolute;
right: 0;
top: 50%;
margin-top: -50px;
}
.nums .active{
background-color: #fff;
}
.hide{
display: none;
}
3、全部jquery-js代码
$(function(){
var i=0;
var timer=null;
for (var j = 0; j < $('.imgs li').length; j++) { //创建圆点
$('.nums').append('')
}
$('.nums li').first().addClass('active'); //给第一个圆点添加样式
var firstimg=$('.imgs li').first().clone(); //复制第一张图片
$('.imgs').append(firstimg).width($('.imgs li').length*($('.imgs img').width()));
//第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度
$('.des').width($('.imgs li').length*($('.imgs img').width()));
// 下一个按钮
$('.next').click(function(){
i++;
if (i==$('.imgs li').length) {
i=1; //这里不是i=0
$('.imgs').css({left:0}); //保证无缝轮播，设置left值
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.imgs li').length-1) { //设置小圆点指示
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
})
// 上一个按钮
$('.prev').click(function(){
i--;
if (i==-1) {
i=$('.imgs li').length-2;
$('.imgs').css({left:-($('.imgs li').length-1)*1200});
}
$('.imgs').stop().animate({left:-i*1200},300);
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
})
//设置按钮的显示和隐藏
$('.banner').hover(function(){
$('.btns').show();
},function(){
$('.btns').hide();
})
//鼠标划入圆点
$('.nums li').mouseover(function(){
var _index=$(this).index();
$('.imgs').stop().animate({left:-_index*1200},300);
$('.nums li').eq(_index).addClass('active').siblings().removeClass('active');
$('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
})
//定时器自动播放
timer=setInterval(function(){
i++;
if (i==$('.imgs li').length) {
i=1;
$('.imgs').css({left:0});
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.img li').length-1) {
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},3000)
//鼠标移入，暂停自动播放，移出，开始自动播放
$('.banner').hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(function(){
i++;
if (i==$('.imgs li').length) {
i=1;
$('.imgs').css({left:0});
};
$('.imgs').stop().animate({left:-i*1200},300);
if (i==$('.img li').length-1) {
$('.nums li').eq(0).addClass('active').siblings().removeClass('active');
$('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
}else{
$('.nums li').eq(i).addClass('active').siblings().removeClass('active');
$('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
}
},3000)
})
})