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"><</div>
<div class="btn button_R">></div>
2016.3.26
