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根據(jù)圖片個數(shù)為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
