Jquery教你寫一個簡單的輪播.

這個我表示寫的不咋地-_-//，但是勝在簡單，可優化性不錯。

實際上我本來想寫個復雜點的結構的，但是最近忙成狗了！！！！所以大家就講究着看吧

HTML結構

<div class="banner clearfix">
<ul>
<li><img src="images/slide/1.png" /></li>
<li><img src="images/slide/2.png" /></li>
<li><img src="images/slide/3.png" /></li>
<li><img src="images/slide/4.png" /></li>
<li><img src="images/slide/5.png" /></li>
</ul>
</div>

CSS部分（因為我的banner圖為1920的寬度，所以-960）

.banner{ height:365px; overflow:hidden;}
.banner ul{ float:left; position:relative; left:50%; margin-left:-960px;}
.banner ul li{ float:left;}

Jquery.....看到我這個代碼，估計就看出我一開始想用面向對象搞個復雜點的了....（可惜萬惡的客戶催催催。。。等有時間我會完善一下的）

var pic_index=0;

//函數控制如果為大於4返回第一個
function slide_pic()
{
    if(pic_index<4){pic_index = pic_index + 1}
    else{pic_index=0}
}
//函數申明主體，以及圖片切換函數
slide_pic.prototype = {
    pic_num : '5',
    pic_slide : function() {
        $(".banner ul li").eq(pic_index).show().siblings("li").hide()
    }
}
實例化函數。以及調用函數
function slide()
{
    var obj = new slide_pic();
    obj.pic_slide(pic_index);
}
函數計時器
var slide_index = setInterval(slide,1000)