jQuery圖片輪播的具體實作_jquery

效果如下：

先看html程式碼，以及對應的css程式碼：

複製程式碼程式碼如下：

  ul class="slider" >
       

       "/>
       

       

       

;

      

       
• 1

       
        4
       
• 5

   

> ;

複製碼代碼如下：

#scrollPics{

    高度：150px;   寬度：100% 寬度：100%； ；
    溢出：隱藏；
    位置：相對；
}
.num{
    位置:絕對; :5p.
#scrollPics .num li{
    浮動：左；
    顏色：#FF7300；
    文字對齊：2016p 🎜>高度: 16px;
    遊標: 指針;
    溢出: 隱藏;
    邊距: 3px 1px;
     邊距: 3px 1px;
   
}
#scrollPics .num li.on{
    顏色：#fff;
    行高：21px;
    寬度：21px;   像素；
    邊距：0 1 像素；
    邊框：0；
    背景顏色：#FF7300;
  >
用絕對定位設定清單 num 個的位置，對 li 設定相關樣式，上表示顯示圖片的數字清單中 li 的樣式類別。

接下來是js程式碼：





複製程式碼


程式碼如下：

//捲動廣告
    var len = $(".num > li").length;
    var index = 0;  //Tim (".num li").mouseover(function() {
        index = $(".num li").index(this);  //取得滑鼠懸浮li 的index
    🎜>    }).eq(0).mouseover();
    //滑入停止動畫，並滑出開始動畫.
    $('#scrollPics').h  val (adTimer);
    }, function() {
        adTimer = setInterval(function() {
      index ;
            if (index == len) {       //最後}          index = 0;
          trigger("mouseleave");

    function showImg(index) {
        function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
  )(p. .animate({
            "marginTop": -adHeight * index "px"    //改變marginTop 屬性的值達到輪播(".num li"). removeClass("on")
            .eq(index).addClass("on");
    }

    }