全部用jquery写的无缝左右滑动轮播图

这里的圆点的html代码是通过js实现的，全jquery实现无缝轮播

1、html代码

<div class="banner">

<ul class="imgs">

<li><a href="#"><img src="/img/pic1.jpg" alt="第1张图片"></a></li>

<li><a href="#"><img src="/img/pic2.jpg" alt="第2张图片"></a></li>

<li><a href="#"><img src="/img/pic3.jpg" alt="第3张图片"></a></li>

<li><a href="#"><img src="/img/pic4.jpg" alt="第4张图片"></a></li>

<li><a href="#"><img src="/img/pic5.jpg" alt="第5张图片"></a></li>

</ul>

<!-- 小圆点 -->

<ul class="nums"></ul>

<!-- <ul class="des">

<li>第一个</li>

<li>第二个</li>

<li>第三个</li>

<li>第四个</li>

<li>第五个</li>

<li>第一个</li>

</ul> -->

<div class="btns">

<span class="prev"><</span>

<span class="next">></span>

</div>

</div>

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('<li></li>')

}

$('.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)

})

})