JQuery圖片輪播詳細說明和實現

主要記錄一下今天學到的內容：

css代碼：

ol,ul{
    list-style: none;

}
/* 頭部開始  */
.head{
    /*background-color: red;*/
    height: 500px;
    padding-top: 10px;

}
.head .nav{
    height: 480px;
    overflow: hidden;
    position: relative;
    width: 1200px;
    left: 50%;
    margin-left: -600px;
    /*line-height: 150px;*/
}
.head .num{
   position: absolute;
    right: 5px;
    bottom: 5px;
}
.head .num li{
    float: left;
    width: 16px;
    height: 16px;
    text-align: center;
    border: 1px solid #ff7300;
    background-color: #fff;
    margin: 3px 1px;
    overflow: hidden;
    line-height: 16px;

}
.head .num li.on{
    color: #fff;
    line-height: 21px;
    width: 21px;
    height: 21px;
    background-color: #ff7300;
    border: 0;

}

H5和Jquery代碼：

<div class="head">
    <div class="nav">
       <ul class="ad">
           <li><img src="img/slider1.jpg"></li>
           <li><img src="img/slider2.jpg"></li>
           <li><img src="img/slider3.jpg"></li>
           <li><img src="img/slider4.jpg"></li>
     </ul>
        <ul class="num">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>

        </ul>
    </div>



</div>
<div class="content"></div>
<div class="footer"></div>
<script src="jquery.min.js"></script>
<script>
    var len=$(".num>li").length;
    var index=0;
    var adTimer;
    $(".num li").mouseover(function(){
        index=$(".num li").index(this);
        showImage(index);
    })

    $(".nav").hover(function(){
        clearInterval(adTimer);

    },function(){
        adTimer=setInterval(function(){
            showImage(index);
            index++;
            if(index==len)
            index=0;
        },3000);

    }).trigger("mouseleave");

    function showImage(index)
    {
        var adHeight=$(".nav>ul>li:first").height();
        if(index==0)
            $(".ad").stop(true,false).animate({
                "marginTop":-adHeight*index+"px"
            },1);
        else
        $(".ad").stop(true,false).animate({
            "marginTop":-adHeight*index+"px"
        },1000);
       $(".num li").removeClass("on").eq(index).addClass("on");
    }



</script>

函數說明：

1.eq():

如果給定表示 DOM 元素集合的 jQuery 對象，.eq() 方法會用集合中的一個元素構造一個新的 jQuery 對象。所使用的 index 參數標示集合中元素的位置。

2.triggle():

trigger() 方法觸發被選元素的指定事件類型,這次主要爲了頁面一進來就開始執行mouseleave事件

3.hover():

hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。
jQuery 1.7 版本前該方法觸發 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本後該方法觸發 mouseover 和 mouseout 事件。
這次主要爲了開始計時和結束