jquery实现无缝轮播

CSS

轮播

*{padding:0;margin:0;list-style:none;}

.box{

margin:100px auto;

/*border:5px solid #000;*/

width:392px;

height:220px;

over flow:hidden;

position:relative;

}

.box .img li{float:left;}

.box .img{

width:2000px;

position:absolute;

left:0px;

top:0px ;

}

.box .num{

position:absolute;

width:100%;

left:0;

bottom:8px;

/* background-color:#096;*/

text-align:center;

font-size:0px;

}

.box .num li{

width: 10px;

height: 10px;

border-radius: 50%;

/* background-color:#666;*/

background-color: #888;

display: inline-block;

margin: 3px;

cursor: pointer;

}

.box .btn{

width:20px;

height:30px;

/*background-color:#666;*/

background-color:rgba(0,0,0,0.5);

position:absolute;

font-size:25px;

color:#CCC;top:50%;

margin-top:-25px;

/*vertical-align:middle;*/

cursor:pointer;

text-align:center;

}

.box .button_L{left:0;}

.box .button_R{right:0;}

.box .num .dot{background-color:#F60;}

SCRIPT

$(function(){

vark=0;

varclone=$(".box .img li").first().clone();

$(".box .img").append(clone)

varj=$(".box .img li").size()//克隆后再求长度

/* alert(j)*/

//利用js根据图片个数为num类添加li标签

for(i=0;i

$(".box .num").append("<li></li>
")

}

$(".box .num li").first().addClass("dot")

//鼠标悬浮圆点

$(".box .num li").hover(function(){

varindex=$(this).index();

k=index;

$(".box .img").animate({left:-index*392},500)

$(this).addClass("dot").siblings().removeClass("dot")

})

//自动轮播

vart=setInterval(moveL,2000);

//鼠标悬浮box是定时器停止运行

$(".box").hover(function(){

clearInterval(t);

},function(){

vart=setInterval(moveL,2000)

})

//鼠标悬浮btn时定时器停止运行

$(".btn").hover(function(){

clearInterval(t);

},function(){

var t=setInterval(moveL,2000)

})

//向左

$(".box .button_L").click(function(){

moveL();

})

//向右

$(".box .button_R").click(function(){

moveR();

})

function moveL(){

k++;

/*  if(k==j)

{alert(k)

$(".box .img").css({left:0})

k=1;

}

$(".box .img").animate({left:-k*392},500)

$(".box .num li").eq(k).addClass("dot").siblings().removeClass("dot")

})*/

if(k

{

$(".box .img").animate({left:-k*392},500)

if(k==j-1){$(".box .num li").eq(0).addClass("dot").siblings().removeClass("dot")}

$(".box .num li").eq(k).addClass("dot").siblings().removeClass("dot")

}

else

{

/*k=0; */

$(".box .img ").css({left:0})//使用css背地里把img移到了left:-4*392的位置，也就是第5张图片，

//因为使用css和animate方法不一样,css没有过渡的过程，所以用户看不到从第1张到第4张的一张张过渡

k=1;

$(".box .img").animate({left:-k*392},500)

$(".box .num li").eq(k).addClass("dot").siblings().removeClass("dot")}

}

function moveR(){

k--;

if(k>=0)

{$(".box .img").animate({left:-k*392},500)

$(".box .num li").eq(k).addClass("dot").siblings().removeClass("dot")}

else

{

$(".box .img").css({left:-(j-1)*392})

k=j-2;

$(".box .img").animate({left:-k*392},500)

$(".box .num li").eq(k).addClass("dot").siblings().removeClass("dot")}

}

})

HTML

<div class="box">

<ul class="img">

<li><a href="#"><img src="img/pic9.jpg" /></a></li>

<li><a href="#"><img src="img/pic10.jpg" /></a></li>

<li><a href="#"><img src="img/pic11.jpg" /></a></li>

</ul>

<ul class="num">

</ul>

<div class="btn button_L">&lt</div>

<div class="btn button_R">&gt</div>

2016.3.26