<div class="out">
<!--輪播圖-->
<ul class="img">
<li><a href="news.html"><img src="img/suanmei.png"></a></li>
<li><a href="news.html"><img src="img/xiangcheng.png"></a></li>
<li><a href="news.html"><img src="img/lanmei.png"></a></li>
<li><a href="news.html"><img src="img/lizhi.png"></a></li>
<li><a href="news.html"><img src="img/new.png"></a></li>
</ul>
<!--焦點-->
<ul class="num">
</ul>
<!--左右箭頭-->
<div class="left btn"><img src="img/left.png"/></div>
<div class="right btn"><img src="img/right.png"/></div>
</div>
樣式：
.out {
width:400px;
height:300px;
margin:30px 0;
position:relative;
float: left;
}
.img li {
position:absolute;
top:0px;
left:0px;
display:none;
height: 320px;
width: 400px;
}
.img li img{
width: 100%;
height: 320px;
}
.out .num {
position:absolute;
bottom:0px;
left:0px;
font-size:0px;
text-align:center;
width:100%;
}
.num li {
width:20px;
height:20px;
background:none;
color:#666;
text-align:center;
line-height:20px;
display:inline-block;
font-size:16px;
border: 2px solid #666;
margin-right:10px;
cursor:pointer;
}
.out .btn {
position:absolute;
top:50%;
margin-top:-20px;
height:60px;
background:rgba(0,0,0,0);
color:#FFFFFF;
text-align:center;
line-height:60px;
font-size:40px;
display:none;
cursor:pointer;
}
.btn img{width: 50px;height: 40px;}
.out .num li.active-1 {
background:#666;
color: #fff;
}
.out:hover .btn {
display:block
}
.out .left {
left:0px;
}
.out .right {
right:0px;
}
js代碼：
function showRestart(){
jQuery('.restart').fadeTo(300,1);
}
/** Restart demo **/
function restart(){
jQuery('.restart,.fader').css({'display':'none'});
init();
}
$(function(){
//下方for循環
var size=$(".img li").size()
for(var i=1; i<=size; i++){
var li="<li>"+i+"</li>";
$(".num").append(li)
}
/*size 獲取當前元素個數*/
//手動控制輪播
$(".img li").eq(0).show()
$(".num li").eq(0).addClass('active-1')
/*mouseover 可以改成點擊事件 click*/
$(".num li").mouseover(function(){
$(this).addClass('active-1').siblings('li').removeClass('active-1')
var index=$(this).index() /*index 當前元素的意思索引值*/
i=index; //i值和自動輪播值是相同的
$(".img li").eq(index).stop().fadeIn(/*淡入*/).siblings().stop().fadeOut(/*淡出*/) /*eq 0開始*/
});
//自動控制輪播
var i=0;
var t=setInterval(move,3000) //定時器
//右
function move(){
i++;
if(i==size){i=0;}
$(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');
$(".img li").eq(i).fadeIn().siblings().fadeOut();
};
//左
function moveL(){
i--;
if(i==-1){i=size-1;}
$(".num li").eq(i).addClass('active-1').siblings('li').removeClass('active-1');
$(".img li").eq(i).fadeIn().siblings().fadeOut();
};
//自動輪播鼠標經過移入和移除
$(".out").hover(function(){
clearInterval(t)
},function(){
t=setInterval(move,3000)
});
//左右按鈕
$(".out .left").click(function(){
moveL()
})
$(".out .right").click(function(){
move()
})
});