自適應圖片寬度的jQuery焦點幻燈輪播代碼

XML/HTML Code

<p id="slide_box">  

  <!– 幻燈片圖片 –>  

  <ul class="slide_img">  

    <li><a href=""><img src="1.jpg" width="800" height="450" alt=""></a></li>  

    <li><a href=""><img src="2.jpg" width="735" height="450" alt=""></a></li>  

    <li><a href=""><img src="3.jpg" width="371" height="450" alt=""></a></li>  

    <li><a href=""><img src="4.jpg" width="700" height="450" alt=""></a></li>  

    <li><a href=""><img src="5.jpg" width="650" height="450" alt=""></a></li>  

    <li><a href=""><img src="6.jpg" width="670" height="450" alt=""></a></li>  

    <li><a href=""><img src="7.jpg" width="575" height="450" alt=""></a></li>  

  </ul>  

  <!– 幻燈片序列號 –>  

  <p id="slide_order"></p>  

  <p style="clear:both;"></p>  

</p>  

 

JavaScript Code

/** 

 * JS文件 

 */  

// 在Chrome測試時一直無法支持jQuery的 $(function(){}) 和 $(document).ready(),所以改用原生window.onload;  

window.onload = function (){  

    /** 

     * box      幻燈片外框(p) 

     * uls      幻燈片圖片外框(ul) 

     * order    圖片序列號外框(p) 

     * lis      圖片外框(li) 

     * wdiths   圖片集的總寬度 

     * runtime  定時器自行時間(毫秒) 

     * latency  定時器延遲時間(毫秒) 

     * control  控制器,控制定時器的執行 

     * num      當前li標簽在兄弟集合中的位置 

     * winW     瀏覽器可視區域寬度 

     */  

    var box = $('#slide_box'),uls = $('ul.slide_img'),order = $('#slide_order',box),lis = $('li',uls),widths = 0,runtime = 600,latency = 2000,control,num = 0,winW = $(window).width();  

    // 計算li標簽寬度總和與插入img序號  

    for (var i = 0; i < lis.length; i++) {  

        widths += lis.eq(i).width();  

        order.append('<a href="javascript:vide(0)">'+(i+1)+'</a>');  

    };  

    // 設置ul的寬度等於所有li標簽寬度的總和;  

    uls.width(widths);  

    // 設置box位置居中  

    box.css({left : (winW – box.width())/2});  

    // 給第一個序號'1'添加class  

    order.find('a').removeClass('current').eq(num).addClass('current');  

    //規定時間後執行函數  

    control = setTimeout( slide, latency );  

    // 幻燈片自動運行函數  

    function slide () {  

        // 初始化width  

        var width = 0;  

        num = num < lis.length – 1 ? (num + 1) : 0;  

        // box舊的寬度  

        var old_box_width = box.width();  

        // box新的寬度  

        var lis_now_width = lis.eq(num).width();  

        // 改變box的寬度 = 當前圖片的寬度 和 left值  

        box.animate({width : lis_now_width,left : (winW – lis_now_width)/2},runtime);  

        // 計算第一張圖到當前圖片的寬度總和  

        for (var j = 0; j < num; j++) {  

            width += lis.eq(j).width();  

        };  

        // 設置當前的序號添加class  

        order.find('a').removeClass('current').eq(num).addClass('current');  

        // 改變ul的left值  

        uls.animate({left: 0 – width}, runtime, function () {  

            control = setTimeout( slide, latency );  

        });  

    }  

    // 點擊圖片序號函數  

    $('a',order).live({  

        click: function () {  

            // 立即停止uls當前正在執行的動作  

            uls.stop();  

            //清除定時器  

            clearTimeout(control);  

            num = $(this).index() – 1;  

            slide();  

        }  

    });  

};  

 

 

發佈留言