首頁 > web前端 > js教程 > jQuery圖片輪播的具體實作_jquery

jQuery圖片輪播的具體實作_jquery

WBOY
發布: 2016-05-16 17:22:48
原創
972 人瀏覽過

效果如下:

jQuery圖片輪播的具體實作_jquery

先看html程式碼,以及對應的css程式碼:

複製程式碼程式碼如下:


  ul class="slider" >
       
  • jQuery圖片輪播的具體實作_jquery

  •        "/>
           
  • jQuery圖片輪播的具體實作_jquery

  •        
  • jQuery圖片輪播的具體實作_jquery

  •        
  • jQuery圖片輪播的具體實作_jquery ;

  •       

             
    • 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");
        }


        }


    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板