jQuery淡入淡出的輪播圖
html結構：
<div class="banna">
<ul class="img">
<li><a href=""><img src="../images/pic1.jpg" ></a></li>
<li><a href=""><img src="../images/pic2.jpg"></a></li>
<li><a href=""><img src="../images/pic3.jpg"></a></li>
<li><a href=""><img src="../images/pic4.jpg"></a></li>
<li><a href=""><img src="../images/pic5.jpg"></a></li>
<li><a href=""><img src="../images/pic6.jpg"></a></li>
</ul>
<ul class="num"></ul>
<div class="btn prev"><i></i></div>
<div class="btn next"><i></i></div>
</div>
css結構：
.banna{height:360px;width:990px;margin:0 auto;position:relative;margin-top:-40px;}
.banna .img li{position:absolute;left:0 ;top:0;display:none;}
.banna .num{position:absolute;right:10px;bottom:5px;}
.banna .num li{float:left;width:4px;height:4px;border:3px solid #999;margin:5px;border-radius: 50%;display:block;font-size:0;}
.banna .num li.active{border:3px solid #FE5761;}
.banna .btn{position:absolute;top:152px;width:40px;height:60px;font-size:40px;line-height:60px;overflow: hidden;color:#ccc;z-index: 3;}
.btn i{display:block;width:17px;height:30px;margin:15px 12px;background:url(../images/按鈕.png)no-repeat scroll;background-position: 0 0;background-size: auto 30px;background-clip: border-box;background-origin: padding-box;}
.btn:hover{background:rgba(0,0,0,0.5);}
.banna .prev{left:222px;}
.banna .prev i{background-position: 0 0;}
.banna .next{right:0;}
.banna .next i{background-position:-17px 0;}
jquery結構：
$(function(){
//初始化代碼：
var size=$(".img li").size();
for (var i = 1; i <= size; i++) {
var li="<li>"+i+"</li>";
$(".num").append(li);
};
//手動控制輪播效果
$(".img li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".num li").mouseover(function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i=index;
$(".img li").eq(index).fadeIn(300).siblings().fadeOut(300);
})
//自動
var i = 0;
var t = setInterval(move, 1500);
//核心向左的函數
function Left() {
i--;
if (i == -1) {
i = size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//核心向右的函數
function right() {
i++;
if (i == size) {
i = 0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
//定時器的開始與結束
$(".banna").hover(function() {
clearInterval(t);
}, function() {
t = setInterval(move, 1500)
})
//左邊按鈕的點擊事件
$(".banna .prev").click(function() {
Left();
})
//右邊按鈕的點擊事件
$(".banna .next").click(function() {
right();
）}
）}
jQuery淡入淡出的輪播圖