單張圖片,多張圖標爲一個輪播對象的輪播圖:按需加載 和 非按需加載

目錄以下:javascript

只有text 是用於測試,其餘都是必須的,img下面有兩個獨立的slider,兩個獨立方便往後修改圖片css

 

如下是focus-slider中的 img/focus-slider是輪播圖片直接下載便可:html

 

如下是todays-slider的圖片:



 

 

<!-- 輪播圖兩個思路:

    1,把每一個輪播對象看作一個對象進行輪播的
    2,把全部輪播對象看作一個對象進行輪播的


每一個輪播對象中只有一張圖片的輪播圖 直接加載 和 按需加載,基本一致,只有最後一點不一樣。

    1,直接加載
        使用輪播圖對象調用slider插件
        $focusSlider.slider({
            css3: true,
            js: false,
            animation: 'fade', // fade淡入淡出  slide滑動
            activeIndex: 0, //默認圖片,圓點按鈕顯示的索引值
            interval: 0  //自動輪播的時間間隔
        });

    2,按需加載
        須要額外寫一段代碼,具體查看index.js 中的代碼

輪播必須步驟:
    1,搭好結構,全部的類名必須保持一致。,謹記下載好圖片放到指定文件夾中。  indicator /'ɪndɪkeɪtə/ 標誌

    2,導入css樣式:base.css , common.css ,注意common.css中輪播圖中 的非共性樣式能夠寫到index.css中去,輪播圖基本都是共性,複用時一些特性能夠直接在index.css中覆蓋。

    3,導入如下js腳本
        jquery.js
        transition.js //兼容:transitionend 動畫結束時執行的操做 的寫法
        showHide.js  //silent,css3,js,三種方式顯示
        move.js   //指定一個物體移動到指定位置。
        slider.js //輪播圖腳本
        index.js //特性腳本

注意點:
    1,寫樣式時:
        .slider-control{ display:none;} 必須隱藏,不然加載時不用鼠標懸浮,左右按鈕就會顯示
        .slider-fade .slider-item{ display:none;} 必須隱藏,不然加載時,沒有把全部輪播圖片都隱藏,因此點擊前四次都是顯示第一張圖片

    2,使用直接加載時,
        使用輪播圖對象調用slider插件
        $focusSlider.slider({
            css3: true,
            js: false,
            animation: 'fade', // fade淡入淡出  slide滑動
            activeIndex: 0, //默認圖片,圓點按鈕顯示的索引值
            interval: 0  //自動輪播的時間間隔
        });
        結構中的img標籤改成: <img src="須要加載的圖片地址" alt=""> 即:
        把整個輪播圖對象都修改成:
        <div class="slider-item">
            <a href="javascript:;"><img src='img/focus-slider/1.png' alt="" ></a>
        </div> 

    3,其中如下幾個字體的左右尖括號比較向,方向鍵:
        font-family: serif;
        font-family: simsum;

   4, 在index.js中
      //手動延遲一秒,模擬從其餘服務器獲取圖片
      //setTimeout(function(){
      //image.src = url;
      //},1000);

===此外,每一個輪播對象 .slider-item 中有多張圖片時的作法:===
    1,寫好結構以下:.todays整個結構,謹記下載好須要的圖片
    2,todays-slider  這能夠寫到index.css中,特有樣式:
            .todays .slider{//設置整個輪播圖的寬高
               width:100%;
               height:158px;
            }
            .todays .slider-img{ //設置每一個圖片的寬度
               width:240px;
            }
    3,按需加載 的代碼:
        //todays-slider
           var $todaysSlider = $('#todays-slider');
            $todaysSlider.items = {};
            $todaysSlider.loadedItemNum = 0;
            $todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length;
            $todaysSlider.on('slider-show', $todaysSlider.loadItem = function(e, index, elem) {
                console.log(1);
                if ($todaysSlider.items[index] !== 'loaded') {
                    $todaysSlider.trigger('slider-loadItem', [index, elem]);
                }
            });
            $todaysSlider.on('slider-loadItem', function(e, index, elem) {
                // 按需加載
                var $imgs = $(elem).find('.slider-img');
                $imgs.each(function (_,el) {  // _ 至關佔位,不使用該參數。
                    var $img=$(el);
                    loadImg($img.data('src'), function(url) {
                    $img.attr('src', url);
                    $todaysSlider.items[index] = 'loaded';
                    $todaysSlider.loadedItemNum++;
                    console.log(index + ': loaded');
                    if ($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum) {
                        // 所有加載完畢
                        $todaysSlider.trigger('slider-itemsLoaded');
                    }
                }, function(url) {
                    console.log('從' + url + '加載圖片失敗');
                    // 多加載一次
                    // 顯示備用圖片
                    $img.attr('src', '../img/focus-slider/placeholder.png');
                });
                });

            });

            $todaysSlider.on('slider-itemsLoaded', function(e) {
                console.log('itemsLoaded');
                // 清除事件
                $todaysSlider.off('slider-show', $todaysSlider.loadItem);
            });


            function loadImg(url, imgLoaded, imgFailed) {
                var image = new Image();
                image.onerror = function() {
                    if (typeof imgFailed === 'function') imgFailed(url);
                }
                image.onload = function() {
                    if (typeof imgLoaded === 'function') imgLoaded(url);
                };
                // image.src=url;     
                setTimeout(function() {
                    image.src = url;
                }, 1000);

            }

            $todaysSlider.slider({
                css3: true,
                js: false,
                animation: 'slide', // fade  slide
                activeIndex: 0,
                interval: 0
            }); 

    -->

  

slider.htmljava

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
    <!-- focus-slider -->
    <div id="focus-slider" class="slider">
        <div class="slider-container">
            <div class="slider-item">
                <a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/1.png' alt="" class="slider-img"></a>
            </div>
            <div class="slider-item">
                <a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/2.png' alt="" class="slider-img"></a>
            </div>
            <div class="slider-item">
                <a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/3.png' alt="" class="slider-img"></a>
            </div>
            <div class="slider-item">
                <a href="javascript:;"><img src="img/focus-slider/loading.gif" data-src='img/focus-slider/4.png' alt="" class="slider-img"></a>
            </div>
        </div>
        <ol class="slider-indicator-wrap">
            <li class="slider-indicator text-hidden fl">1</li>
            <li class="slider-indicator text-hidden fl">2</li>
            <li class="slider-indicator text-hidden fl">3</li>
            <li class="slider-indicator text-hidden fl">4</li>
        </ol>
        <a href="javascript:;" class="slider-control slider-control-left"><</a>
        <a href="javascript:;" class="slider-control slider-control-right">></a>
    </div>
    <!-- todays-slider -->
    <div class="todays">
        <div class="container">
            <div id="todays-slider" class="slider">
                <div class="slider-container">
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/1.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/2.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/4.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/6.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/8.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/10.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/11.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                    </div>
                </div>
                <a href="javascript:;" class="slider-control slider-control-left"><</a>
                <a href="javascript:;" class="slider-control slider-control-right">></a>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/transition.js"></script>
    <script type="text/javascript" src="js/showHide.js"></script>
    <script type="text/javascript" src="js/move.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
 
</body>
</html>

  

 

base.cssjquery

/*css reset*/
    /*清除內外邊距*/
    body, h1, h2, h3, h4, h5, h6, p, hr, /*結構元素*/
    ul, ol, li, dl, dt, dd, /*列表元素*/
    form, fieldset, legend, input, button, select, textarea, /*表單元素*/
    th, td, /*表格元素*/
    pre {
        padding: 0;
        margin: 0;
    }
 
    /*重置默認樣式*/
    body, button, input, select, textarea {
        /*font: 12px/1 微軟雅黑, Tahoma, Helvetica, Arial, 宋體, sans-serif;*/
        color: #333;
        font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    em, i {
        font-style: normal;
    }
 
    a {
        text-decoration: none;
    }
    li {
        list-style-type: none;
        vertical-align: top;
    }
    img {
        border: none;
        /*display: block;*/
        vertical-align: top;
    }
    textarea {
        overflow: auto;
        resize: none;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
 
/*經常使用公共樣式*/
    .fl {
        float: left;
        display: inline;
    }
    .fr {
        float: right;
        display: inline;
    }
    .cf:before,
    .cf:after {
        content: " ";
        display: table;
         
    }
    .cf:after {
        clear: both;
    }
    .cf {
        *zoom: 1;
    }

  

 

common.csscss3

/*公共樣式*/
 
    .container {
        /*站點導航*/
        width: 1200px;
        margin: 0 auto;
    }
 
    a.link {
        /*連接正常顏色*/
        color: #4d555d;
    }
 
    a.link:hover {
        /*連接通過顏色*/
        color: #f01414 !important;
    }
 
    .transition {
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
 
    .text-hidden{
        text-indent: -9999px;
        overflow: hidden;
    }
 
 
    .text-ellipsis{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
 
/*showhide*/
    .fadeOut {
        visibility: hidden !important;
        opacity: 0 !important;
    }
    .slideUpDownCollapse {
        height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .slideLeftRightCollapse {
        width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
 
/*slider 本身寫的輪播圖樣式*/
    .slider{
        margin: 100px auto;
        height: 504px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        width: 728px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        position: relative;
        overflow: hidden;
    }
    .slider-container{
 
    }
    .slider-item{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .slider-indicator-wrap{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
    }
    .slider-indicator{
        width: 8px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        height: 8px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        border-radius: 50%;
        background: #f7f8f9;
        border: 2px solid #858b92; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        margin-left: 8px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
    }
    .slider-indicator-active {
        background: #000; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        border: 2px solid #858b92; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
    }
    .slider-control{
        /* 加載就隱藏,不然加載的時候就顯示着 */
        display: none;
        width: 28px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        height: 62px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        line-height: 62px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        font-family: serif; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        background: #000; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        color: #fff; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        opacity: .8; /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        filter: alpha(opacity=80); /*非公共樣式,能夠寫到index.css中,這裏只存放公共樣式或組件*/
        text-align: center;
    }
    .slider-control-left{
        left: 0;
    }
    .slider-control-right{
        right: 0;
    }
    .slider-slide .slider-item{
        position: absolute;
        top: 0;
        left: 100%;/* 經過移動left屬性值來實現圖片切換,每次移動都是圖片的100%寬度 */
        width:100%;
        height: 100%;
    }
    .slider-fade .slider-item{
        /* 加載就隱藏,不然會出現前面幾回點擊不會切換圖片 */
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
    }
 
    /*todays-slider  這能夠寫到index.css中,都是特性*/
        .todays .slider{
           width:100%;
           height:158px;
        }

        .todays .slider-img{
           width:240px;

        }

  

 

jquery.jsweb

    <!-- 這裏使用CDN引入jquery.js文件,僅用發佈時使用,開發時比較慢 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>
        /*
        開發時使用本地效率比較高
        判斷若是上面的cdn引入的jquery.js文件沒有成功(如:服務器不穩定致使)
        則引入本地的jquery.js文件。
        此外,結尾的的script標籤使用反斜槓進行轉義: \/ */
        window.jQuery || document.write('<script src = "js/index.js"><\/script>')

        //也可使用字符串拼接
        // window.jQuery || document.write('<script src = "js/index.js"><' + '/script>')
    </script>

  

 

transition.jsajax

(function () {
    // 'use strict';//在IE瀏覽器下,使用嚴格模式是不能定義多個變量的,因此不能使用嚴格模式

    //判斷樣式是否支持該瀏覽器,能夠在控制檯輸出 document.body.style[屬性名] = ""; 則支持
    //若是返回的 undefined 則不支持。 
    //由於調用未定義的對象,報錯;使用未定義的屬性,返回undefined
    var transitionEndEventName = {
        transition: 'transitionend',
        MozTransition: 'transitionend',
        WebkitTransition: 'webkitTransitionEnd',
        OTransition: 'oTransitionEnd otransitionend'
    };
    var transitionEnd = '',
        isSupport = false;
 
    for (var name in transitionEndEventName) {
        if (document.body.style[name] !== undefined) {
            transitionEnd = transitionEndEventName[name];
            isSupport = true;
            break;
        }
    }
 
 //暴露一個藉口對象給外界調用
 // window.mt = ""  window.mt = undefined   進行隱式轉換 都是false
 // 因此window.mt 只能是一個對象時才返回真
 // 與找false,或找true
    window.mt = window.mt || {};
    window.mt.transition = {
        end: transitionEnd,
        isSupport: isSupport
    };
})();

  

 

showHide.js瀏覽器

(function($) {
    var transition = window.mt.transition; // transition兼容解決,transition.js
 
    // 提取init公共部分
    function init($elem, hiddenCallback) {
 
        if ($elem.is(':hidden')) {
            $elem.data('status', 'hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();
 
        } else {
            $elem.data('status', 'shown');
        }
    }
 
    // 提取show公共部分
 
    function show($elem, callback) {
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') return;
        $elem.data('status','show').trigger('show');
        callback();
 
 
    }
 
    function hide($elem, callback) {
 
        if ($elem.data('status') === 'hide') return;
        if ($elem.data('status') === 'hidden') return;
        $elem.data('status', 'hide').trigger('hide');
        callback();
 
    }
 
    // 正常顯示和隱藏
    var silent = {
        //初始化顯示和隱藏的狀態
        // if ($elem.is(':hidden')) {
        //            $elem.data('status', 'hidden');
        //            if(typeof hiddenCallback==='function') hiddenCallback();
 
        //        } else {
        //            $elem.data('status', 'shown');
        //        }
 
        // 提取公共init後
        init: init,
        // show: function($elem) {
        //     //判斷狀態,解決重複觸發事件 
        //     if ($elem.data('status') === 'show') return;
        //     if ($elem.data('status') === 'shown') return;
        //     //給元素添加狀態值
        //     $elem.data('status', 'show').trigger('show');
        //     $elem.show();
        //     $elem.data('status', 'shown').trigger('shown');
 
 
        // },
        show: function($elem) {
            show($elem, function() {
                $elem.show();
                $elem.data('status', 'shown').trigger('shown');
            });
 
 
        },
        // hide: function($elem) {
        //     if ($elem.data('status') === 'hide') return;
        //     if ($elem.data('status') === 'hidden') return;
        //     $elem.data('status', 'hide').trigger('hide');
        //     $elem.hide();
        //     $elem.data('status', 'hidden').trigger('hidden');
        // }
 
        hide: function($elem) {
            hide($elem, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
 
        }
    };
    // 帶效果的顯示和隱藏,css3實現方法
    var css3 = {
 
 
        fade: { // 淡入淡出
            // init: function($elem) {
            //    $elem.addClass('transition');
            //     if ($elem.is(':hidden')) {
            //         $elem.data('status', 'hidden');
            //         $elem.addClass('fadeOut');
            //     } else {
            //         $elem.data('status', 'shown');
            //     }
 
            // 提取公共init後,獨有的內容
 
            // init: function($elem) {
            //     $elem.addClass('transition');
            //     init($elem, function() {
            //         $elem.addClass('fadeOut');
 
            //     });
 
 
            init: function($elem) {
                css3._init($elem, 'fadeOut');
 
            },
            // show: function($elem) {
            //     if ($elem.data('status') === 'show') return;
            //     if ($elem.data('status') === 'shown') return;
            //     //給元素添加狀態值
            //     $elem.data('status', 'show').trigger('show');
            //     $elem.off('transitionend').one('transitionend', function() {
            //         $elem.data('status', 'shown').trigger('shown');
            //     });
            //     $elem.show();
            //     setTimeout(function() {
            //         $elem.removeClass('fadeOut');
            //     }, 20);
 
 
            // },
 
            show: function($elem) {
                css3._show($elem, 'fadeOut');
 
            },
 
            // hide: function($elem) {
            //     if ($elem.data('status') === 'hide') return;
            //     if ($elem.data('status') === 'hidden') return;
            //     $elem.data('status', 'hide').trigger('hide');
            //     $elem.off('transitionend').one('transitionend', function() {
            //         $elem.hide();
            //         $elem.data('status', 'hidden').trigger('hidden');
            //     });
            //     $elem.addClass('fadeOut');
            // }
 
            hide: function($elem) {
                css3._hide($elem, 'fadeOut');
 
            }
 
        },
        slideUpDown: { // 上下滾動
            // init: function($elem) {
            //      $elem.height($elem.height());  //設置高度,解決沒有slideUpDown的過程。
            //      $elem.addClass('transition');
            //      init($elem, function() {
            //          $elem.addClass('slideUpDownCollapse');
 
            //      });
 
            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'slideUpDownCollapse');
 
            },
            show: function($elem) {
                css3._show($elem, 'slideUpDownCollapse');
 
            },
            hide: function($elem) {
                css3._hide($elem, 'slideUpDownCollapse');
            }
        },
        slideLeftRight: { // 左右滾動
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'slideLeftRightCollapse');
 
            },
            show: function($elem) {
                css3._show($elem, 'slideLeftRightCollapse');
 
            },
            hide: function($elem) {
                css3._hide($elem, 'slideLeftRightCollapse');
            }
        },
        fadeSlideUpDown: { // 淡入淡出上下滾動
            init: function($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'fadeOut slideUpDownCollapse');
 
            },
            show: function($elem) {
                css3._show($elem, 'fadeOut slideUpDownCollapse');
 
            },
            hide: function($elem) {
                css3._hide($elem, 'fadeOut slideUpDownCollapse');
            }
        },
 
        fadeSlideLeftRight: { // 淡入淡出左右滾動
            init: function($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'fadeOut slideLeftRightCollapse');
 
            },
            show: function($elem) {
                css3._show($elem, 'fadeOut slideLeftRightCollapse');
 
            },
            hide: function($elem) {
                css3._hide($elem, 'fadeOut slideLeftRightCollapse');
            }
        }
    };
 
    css3._init = function($elem, className) {
        $elem.addClass('transition');
        init($elem, function() {
            $elem.addClass(className);
 
        });
 
    };
 
    css3._show = function($elem, className) {
        show($elem, function() {
            $elem.off(transition.end).one(transition.end, function() {
                $elem.data('status', 'shown').trigger('shown');
            });
            $elem.show();
            setTimeout(function() {
                $elem.removeClass(className);
            }, 20);
        });
 
 
    };
 
    css3._hide = function($elem, className) {
        hide($elem, function() {
            $elem.off(transition.end).one(transition.end, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
            $elem.addClass(className);
 
        });
 
    }
 
    // 帶效果的顯示和隱藏,js實現方法
    var js = {
        fade: { // 淡入淡出
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, 'fadeIn');
            },
            hide: function($elem) {
 
                js._hide($elem, 'fadeOut');
 
            }
        },
        slideUpDown: { // 上下滾動
            init: function($elem) {
                js._init($elem);
            },
            show: function($elem) {
                js._show($elem, 'slideDown');
 
            },
            hide: function($elem) {
 
                js._hide($elem, 'slideUp');
 
            }
        },
        slideLeftRight: { // 左右滾動
            init: function($elem) {
                // var styles = {};
                // styles['width'] = $elem.css('width');
                // styles['padding-left'] = $elem.css('padding-left');
                // styles['padding-right'] = $elem.css('padding-right');
                // $elem.data('styles', styles);
                // $elem.removeClass('transition');
 
                // init($elem, function() {
                //     $elem.css({
                //         'width': 0,
                //         'padding-left': 0,
                //         'padding-right': 0
                //     });
                // });
                js._customInit($elem, {
 
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function($elem) {
                // var styles = $elem.data('styles');
                // show($elem, function() {
                //     $elem.show();
                //     $elem.stop().animate({
                //         'width': styles['width'],
                //         'padding-left': styles['padding-left'],
                //         'padding-right': styles['padding-right']
                //     }, function() {
                //         $elem.data('status', 'shown').trigger('shown');
                //     });
                // });
 
                js._customshow($elem);
            },
            hide: function($elem) {
                //     hide($elem, function() {
 
                //         $elem.stop().animate({
                //             'width': 0,
                //             'padding-left': 0,
                //             'padding-right': 0
                //         }, function() {
                //             $elem.hide();
                //             $elem.data('status', 'hidden').trigger('hidden');
                //         });
                //     });
                // }
 
                js._customHide($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        },
        fadeSlideUpDown: { // 淡入淡出上下滾動
            init: function($elem) {
                // var styles = {};
                // styles['opacity'] = $elem.css('opacity');
                // styles['height'] = $elem.css('height');
                // styles['padding-top'] = $elem.css('padding-top');
                // styles['padding-bottom'] = $elem.css('padding-bottom');
                // $elem.data('styles', styles);
                // $elem.removeClass('transition');
 
                // init($elem, function() {
                //     $elem.css({
                //         'opacity': 0,
                //         'height': 0,
                //         'padding-top': 0,
                //         'padding-bottom': 0
                //     });
                // });
 
                js._customInit($elem, {
 
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0
                });
            },
            show: function($elem) {
                // var styles = $elem.data('styles');
                // show($elem, function() {
                //     $elem.show();
                //     $elem.stop().animate({
                //         'opacity': styles['opacity'],
                //         'height': styles['height'],
                //         'padding-top': styles['padding-top'],
                //         'padding-bottom': styles['padding-bottom']
                //     }, function() {
                //         $elem.data('status', 'shown').trigger('shown');
                //     });
                // });
 
                js._customshow($elem);
            },
            hide: function($elem) {
                //     hide($elem, function() {
 
                //         $elem.stop().animate({
                //             'opacity': 0,
                //             'height': 0,
                //             'padding-top': 0,
                //             'padding-bottom': 0
                //         }, function() {
                //             $elem.hide();
                //             $elem.data('status', 'hidden').trigger('hidden');
                //         });
                //     });
                // }
 
 
                js._customHide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0
                });
            }
        },
        fadeSlideLeftRight: { // 淡入淡出左右滾動
            init: function($elem) {
                // var styles = {};
                // styles['opacity'] = $elem.css('opacity');
                // styles['width'] = $elem.css('width');
                // styles['padding-left'] = $elem.css('padding-left');
                // styles['padding-right'] = $elem.css('padding-right');
                // $elem.data('styles', styles);
                // $elem.removeClass('transition');
 
                // init($elem, function() {
                //     $elem.css({
                //         'opacity': 0,
                //         'width': 0,
                // 'padding-left': 0,
                // 'padding-right': 0
                //     });
                // });
 
                js._customInit($elem, {
 
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            },
            show: function($elem) {
                // var styles = $elem.data('styles');
                // show($elem, function() {
                //     $elem.show();
                //     $elem.stop().animate({
                //         'opacity': styles['opacity'],
                //         'width': styles['width'],
                //         'padding-left': styles['padding-left'],
                //         'padding-right': styles['padding-right']
                //     }, function() {
                //         $elem.data('status', 'shown').trigger('shown');
                //     });
                // });
 
                js._customshow($elem);
            },
            hide: function($elem) {
                //     hide($elem, function() {
 
                //         $elem.stop().animate({
                //             'opacity': 0,
                //         'width': 0,
                // 'padding-left': 0,
                // 'padding-right': 0
                //         }, function() {
                //             $elem.hide();
                //             $elem.data('status', 'hidden').trigger('hidden');
                //         });
                //     });
                // }
 
 
                js._customHide($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0
                });
            }
        }
    };
 
    js._init = function($elem, hiddenCallback) {
        $elem.removeClass('transition'); // js和transition動畫衝突,在執行js前,將transition去掉,屏蔽風險。
        init($elem, hiddenCallback);
    };
 
    js._customInit = function($elem, options) {
        var styles = {};
        for (var p in options) {
            styles[p] = $elem.css(p);
        }
 
        $elem.data('styles', styles);
 
        js._init($elem, function() {
            $elem.css(options);
        });
 
    };
 
    js._customshow = function($elem) {
        var styles = $elem.data('styles');
        show($elem, function() {
            $elem.show();
            $elem.stop().animate($elem.data('styles'), function() {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };
 
    js._customHide = function($elem, options) {
        hide($elem, function() {
 
            $elem.stop().animate(options, function() {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
    };
 
 
    js._show = function($elem, mode) {
        show($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };
 
    js._hide = function($elem, mode) {
 
        hide($elem, function() {
            $elem.stop()[mode](function() {
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
 
    };
 
    var defaults = {
        css3: true,
        js: true,
        animation: 'fade'
    };
 
    function showHide($elem, options) {
        var mode = null;
        // options = $.extend({}, defaults, options);
        if (options.css3 && transition.isSupport) { //css3 transition
            // css3[options.animation].init($elem);
            mode = css3[options.animation] || css3[defaults.animation];
            // return {
            //     // show:css3[options.animation].show,
            //     // hide:css3[options.animation].hide
            // };
        } else if (options.js) { //js animation
            // js[options.animation].init($elem);
            // return {
            //     show: js[options.animation].show,
            //     hide: js[options.animation].hide
            // };
            mode = js[options.animation] || js[defaults.animation];
        } else { // no animation
            // silent.init($elem);
            // return {
            //     show: silent.show,
            //     hide: silent.hide
            // };
            mode = silent;
 
        }
        mode.init($elem);
        return {
            // show: mode.show,
            // hide: mode.hide
            show: $.proxy(mode.show, this, $elem),
            hide: $.proxy(mode.hide, this, $elem),
        };
    }
     
    $.fn.extend({
        showHide: function (option) {
            return this.each(function () {
                var $this = $(this),
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    mode = $this.data('showHide');
 
                if (!mode) {
                    $this.data('showHide', mode = showHide($this, options));
                }
 
                if (typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    });
 
 
    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;
 
})(jQuery);

  

 

 

move.js服務器

(function($) {
    'use strict';
    var transition = window.mt.transition;
    var init = function($elem) {
        this.$elem = $elem;
        this.curX = parseFloat(this.$elem.css('left'));
        this.curY = parseFloat(this.$elem.css('top'));
 
    }
 
    var to = function(x, y, callback) {
        x = (typeof x === 'number') ? x : this.curX;
        y = (typeof y === 'number') ? y : this.curY;
        if (this.curX === x && this.curY === y) return;
 
        this.$elem.trigger('move', [this.$elem]);
        if (typeof callback === 'function') {
            callback();
        }
 
        this.curX = x;
        this.curY = y;
 
    }
 
    var Silent = function($elem) {
        init.call(this, $elem); //改變this的指向,這裏this指外面的this,如不使用call,this指init。
        this.$elem.removeClass('transition');
 
 
    };
    Silent.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {
 
            self.$elem.css({
                left: x,
                top: y
            });
            self.$elem.trigger('moved', [self.$elem]);
 
        });
 
 
 
 
    };
    Silent.prototype.x = function(x) {
        // if(this.curX===x) return;
        // this.$elem.css({
        //     left:x
        // });
        // this.curX=x;
        this.to(x);
    };
    Silent.prototype.y = function(y) {
        // if(this.curY===y) return;
        // this.$elem.css({
        //     top:y
        // });
        // this.curY=y;
        this.to(null, y);
 
    };
 
 
 
    // css3 方式
    var Css3 = function($elem) {
        this.$elem = $elem;
        this.$elem.addClass('transition');
        this.curX = parseFloat(this.$elem.css('left'));
        this.curY = parseFloat(this.$elem.css('top'));
        this.$elem.css({
            left: this.curX,
            top: this.curY
        });
 
    };
 
    Css3.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {
 
 
            self.$elem.off(transition.end).one(transition.end, function() {
                self.$elem.trigger('moved', [self.$elem]);
                //     self.$elem.data('status','moved');
                //     self.curX = x;
                //     self.curY = y;
            });
 
            self.$elem.css({
                left: x,
                top: y
            });
 
        });
        // x = (typeof x === 'number') ? x : this.curX;
        // y = (typeof y === 'number') ? y : this.curY;
        // if (this.curX === x && this.curY === y) return;
        // // if(this.$elem.data('status')==='moving') return;
        // // this.$elem.data('status','moving');
        // var self = this;
        // this.$elem.trigger('move', [this.$elem]);
        // this.$elem.off(transition.end).one(transition.end, function() {
        //     self.$elem.trigger('moved', [self.$elem]);
        //     //     self.$elem.data('status','moved');
        //     //     self.curX = x;
        //     //     self.curY = y;
        // });
        // // console.log(1);
        // this.$elem.css({
        //     left: x,
        //     top: y
        // });
        // this.curX = x;
        // this.curY = y;
 
    };
    Css3.prototype.x = function(x) {
        this.to(x);
    };
    Css3.prototype.y = function(y) {
        this.to(null, y);
    };
 
 
 
 
 
    // js方式
    var Js = function($elem) {
        init.call(this, $elem);
        this.$elem.removeClass('transition');
 
 
    };
 
    Js.prototype.to = function(x, y) {
 
 
        var self = this;
        to.call(this, x, y, function() {
            self.$elem.stop().animate({
                left: x,
                top: y
            }, function() {
                self.$elem.trigger('moved', [self.$elem]);
            });
        });
    };
 
    Js.prototype.x = function(x) {
        this.to(x);
 
    };
    Js.prototype.y = function(y) {
        this.to(null, y);
 
    };
 
 
 
    // var $box = $('#box'),
    //     $goBtn = $('#go-btn'),
    //     $backBtn = $('#back-btn'),
    //     move = new Js($box);
 
    // $box.on('move moved', function(e, $elem) {
    //     console.log(e.type);
    //     // console.log($elem);
    // });
    // $goBtn.on('click', function() {
    //     move.to(100, 50);
    //     // move.to(100);
    // });
 
    // $backBtn.on('click', function() {
    //     move.to(0, 20);
    //     // move.to(0);
    // });
 
    var defaults = {
            css3: false,
            js: false
        };
 
    var move = function ($elem, options) {
        var mode = null;
 
        if (options.css3 && transition.isSupport) { // css3 transition
            mode = new Css3($elem);
        } else if (options.js) { // js animation
            mode = new Js($elem);
        } else { // no animation
            mode = new Silent($elem);
        }
 
        return {
            to: $.proxy(mode.to, mode), //改變指針this指向mode.
            x: $.proxy(mode.x, mode),
            y: $.proxy(mode.y, mode)
        };
    };
 
    $.fn.extend({
        move: function (option,x,y) {
            return this.each(function () {
                var $this = $(this),
                    mode = $this.data('move'),
                    options = $.extend({}, defaults, typeof option === 'object' && option);
 
                if (!mode) { // first time
                    $this.data('move', mode = move($this, options));
                }
 
                if (typeof mode[option] === 'function') {
                    mode[option](x, y);
                }
            });
        }
 
    });
 
})(jQuery);

  

 

slider.js

(function ($) {
    'use strict';
 
    function Slider($elem, options) {
        this.$elem = $elem;
        this.options = options;
 
        this.$items = this.$elem.find('.slider-item');
        this.$indicators = this.$elem.find('.slider-indicator');
        this.$controls = this.$elem.find('.slider-control');
 
        this.itemNum = this.$items.length;
        this.curIndex = this._getCorrectIndex(this.options.activeIndex);
 
        this._init();
    }
    Slider.DEFAULTS = {
        css3: false,
        js: false,
        animation: 'fade', // slide
        activeIndex: 0,
        interval: 0
    };
    Slider.prototype._init = function() {
        var self = this;
        this.$elem.trigger('slider-show',[this.curIndex,this.$items[this.curIndex]]);
 
        // init show
        this.$indicators.removeClass('slider-indicator-active');
        this.$indicators.eq(this.curIndex).addClass('slider-indicator-active');
 
        // to
        if (this.options.animation === 'slide') {
            this.$elem.addClass('slider-slide');
            this.$items.eq(this.curIndex).css('left', 0);
 
            // send message
            this.$items.on('move moved', function (e) {
                var index = self.$items.index(this);
 
                if (e.type === 'move') {
                    if (index === self.curIndex) {
                        self.$elem.trigger('slider-hide', [index, this]);
                    } else {
                        self.$elem.trigger('slider-show', [index, this]);
                    }
                } else { // moved
                    if (index === self.curIndex) { // 指定的
                        self.$elem.trigger('slider-shown', [index, this]);
                    } else {
                        self.$elem.trigger('slider-hidden', [index, this]);
                    }
                }
            });
            // move init
            this.$items.move(this.options);
            this.to = this._slide;
 
            this.itemWidth = this.$items.eq(0).width();
            this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
        } else { // fade
            this.$elem.addClass('slider-fade');
            this.$items.eq(this.curIndex).show();
 
            // send message
            this.$items.on('show shown hide hidden', function (e) {
                self.$elem.trigger('slider-' + e.type, [self.$items.index(this), this]);
            });
            // showHide init
            this.$items.showHide(this.options);
            this.to = this._fade;
        }
 
        // bind event
        this.$elem
            .hover(function () {
                self.$controls.show();
            }, function () {
                self.$controls.hide();
            })
            .on('click', '.slider-control-left', function () {
                self.to(self._getCorrectIndex(self.curIndex - 1), 1);
            })
            .on('click', '.slider-control-right', function () {
                self.to(self._getCorrectIndex(self.curIndex + 1), -1);
            })
            .on('click', '.slider-indicator', function () {
                self.to(self._getCorrectIndex(self.$indicators.index(this)));
            });
 
        // auto
        if (this.options.interval && !isNaN(Number(this.options.interval))) {
            this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this));
            this.auto();
        }
    };
    Slider.prototype._getCorrectIndex = function(index) {
        if (isNaN(Number(index))) return 0;
        if (index < 0) return this.itemNum - 1;
        if (index > this.itemNum - 1) return 0;
        return index;
    };
    Slider.prototype._activateIndicators = function(index) {
        this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active');
        this.$indicators.eq(index).addClass('slider-indicator-active');
    };
    Slider.prototype._fade = function(index) {
        if (this.curIndex === index) return;
 
        this.$items.eq(this.curIndex).showHide('hide');
        this.$items.eq(index).showHide('show');
 
        this._activateIndicators(index);
 
        this.curIndex = index;
    };
    Slider.prototype._slide = function(index, direction) {
        if (this.curIndex === index) return;
 
        var self = this;
 
        // 肯定滑入滑出的方向
        if (!direction) { // click indicators
            if (this.curIndex < index) {
                direction = -1;
            } else if (this.curIndex > index) {
                direction = 1;
            }
        }
 
        // 設置指定滑入幻燈片的初始位置
        this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemWidth);
 
        // 當前幻燈片滑出可視區域,指定幻燈片滑入可視區域
        setTimeout(function () {
            self.$items.eq(self.curIndex).move('x', direction * self.itemWidth);
            self.$items.eq(index).addClass(self.transitionClass).move('x', 0);
            self.curIndex = index;
        }, 20);
         
        // 激活indicator
        this._activateIndicators(index);
    };
    Slider.prototype.auto = function() {
        var self = this;
 
        this.intervalId = setInterval(function () {
            self.to(self._getCorrectIndex(self.curIndex + 1), -1);
        }, this.options.interval);
    };
    Slider.prototype.pause = function() {
        clearInterval(this.intervalId);
    };
 
    $.fn.extend({
        slider: function (option) {
            return this.each(function () {
                var $this = $(this),
                    slider = $this.data('slider'),
                    options = $.extend({}, Slider.DEFAULTS, $this.data(), typeof option === 'object' && option);
 
                if (!slider) { // first time
                    $this.data('slider', slider = new Slider($this, options));
                }
 
                if (typeof slider[option] === 'function') {
                    slider[option]();
                }
            });
        }
    })
})(jQuery);

  

 

index.js 如下代碼是沒有優化的,使用時,要使用最後的代碼。

(function($) {
  'use strict';
  //focus-slider
  var $focusSlider = $('#focus-slider');//id效率最高,.類只用於css樣式

  /*$focusSlider.on('slider-show slider-shown slider-hide slider-hidden',function (e,i,elem) {
      console.log(i+':'+e.type);
  });*/
  //暴露過多的全局變量。能夠做爲$focusSlider的屬性進行優化
  /*var items = {};
  var loadedItemNum = 0;
  var totalItemNum = $focusSlider.find('.slider-img').length;//獲取$focusSlider 下面有幾個輪播對象
  var loadItem;//已經加載*/
  $focusSlider.items = {};//items[index],加載的賦值 loaded,沒有加載就不進行操做
  $focusSlider.loadedItemNum = 0;//已經加載幾張圖片
  $focusSlider.totalItemNum = $focusSlider.find('.slider-img').length;//獲取$focusSlider 下面有幾個輪播對象須要加載
  $focusSlider.loadItem;//已經加載

  //監聽輪播對象顯示以前的操做
  /* $focusSlider.on('slider-show',$focusSlider.loadItem = function(e,index,elem){
      //只加載一次
      if ($focusSlider.items[index]!=='loaded') {
          //按需加載

          //找到elem下面的 .slider-img
          var $img = $(elem).find('.slider-img');

          //圖片加載
          loadImg($img.data('src'),function(url){
              $img.attr('src',url);
              $focusSlider.items[index] = 'loaded';
              console.log(index + ':loaded');

              if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {
                  //清除事件
                  $focusSlider.off('slider-show',$focusSlider.loadItem);
              }
          },function(url){
              console.log('從' + url + '加載失敗');
              //顯示備用圖片
              $img.attr('src','../img/focus-slider/placeholder.png');
          });
      }
  });*/
  //把以上代碼拆分紅功能單一的自定義事件以下:
  $focusSlider.on('slider-show',function(e,index,elem){
      //只加載一次
      if ($focusSlider.items[index]!=='loaded') {
          $focusSlider.trigger('slider-loadItem',[index,elem]);//沒有加載過的能夠開始加載
      }
  });

  //開始加載
  $focusSlider.on('slider-loadItem',function(e,index,elem){

      //按需加載

      //找到elem下面的 .slider-img
      var $img = $(elem).find('.slider-img');

      //圖片加載
      loadImg($img.data('src'),function(url){
          $img.attr('src',url);
          $focusSlider.items[index] = 'loaded';
          console.log(index + ':loaded');

          if ($focusSlider.loadedItemNum === $focusSlider.totalItemNum) {
              //所有加載完畢
              $focusSlider.trigger('slider-itemsLoaded');
          }
      },function(url){
          console.log('從' + url + '加載失敗');
          //顯示備用圖片
          $img.attr('src','../img/focus-slider/placeholder.png');
      });
  })

  //清除事件
  $focusSlider.on('slider-itemsLoaded',function(e){
      console.log('itemsLoaded');
      $focusSlider.off('slider-show',$focusSlider.loadItem);
  })


  //圖片加載成功,失敗時處理。容錯率高了。
  function loadImg(url,imgLoaded,imgFailed){
      var image = new Image();

      //加載失敗,圖片加載失敗觸發,屬於javascript事件
      image.onerror = function(){
          if (typeof imgFailed === 'function') imgFailed(url);
      }

      //加載成功,圖片加載成功觸發,屬於javascript事件
      image.onload = function(){
          if (typeof imgLoaded === 'function') imgLoaded(url);
      }

       image.src = url;
      //手動延遲一秒,模擬從其餘服務器獲取圖片
      //setTimeout(function(){
          //image.src = url;
      //},1000);
  }

  $focusSlider.slider({
      css3: true,
      js: false,
      animation: 'fade', // fade  slide
      activeIndex: 0,
      interval: 0
  });




  //todays-slider
     var $todaysSlider = $('#todays-slider');
      $todaysSlider.items = {};
      $todaysSlider.loadedItemNum = 0;
      $todaysSlider.totalItemNum = $todaysSlider.find('.slider-img').length;
      $todaysSlider.on('slider-show', $todaysSlider.loadItem = function(e, index, elem) {
          console.log(1);
          if ($todaysSlider.items[index] !== 'loaded') {
              $todaysSlider.trigger('slider-loadItem', [index, elem]);
          }
      });
      $todaysSlider.on('slider-loadItem', function(e, index, elem) {
          // 按需加載
          var $imgs = $(elem).find('.slider-img');
          $imgs.each(function (_,el) {  // _ 至關佔位,不使用該參數。
              var $img=$(el);
              loadImg($img.data('src'), function(url) {
              $img.attr('src', url);
              $todaysSlider.items[index] = 'loaded';
              $todaysSlider.loadedItemNum++;
              console.log(index + ': loaded');
              if ($todaysSlider.loadedItemNum === $todaysSlider.totalItemNum) {
                  // 所有加載完畢
                  $todaysSlider.trigger('slider-itemsLoaded');
              }
          }, function(url) {
              console.log('從' + url + '加載圖片失敗');
              // 多加載一次
              // 顯示備用圖片
              $img.attr('src', '../img/focus-slider/placeholder.png');
          });
          });

      });

      $todaysSlider.on('slider-itemsLoaded', function(e) {
          console.log('itemsLoaded');
          // 清除事件
          $todaysSlider.off('slider-show', $todaysSlider.loadItem);
      });


      function loadImg(url, imgLoaded, imgFailed) {
          var image = new Image();
          image.onerror = function() {
              if (typeof imgFailed === 'function') imgFailed(url);
          }
          image.onload = function() {
              if (typeof imgLoaded === 'function') imgLoaded(url);
          };
          // image.src=url;     
          setTimeout(function() {
              image.src = url;
          }, 1000);

      }

      $todaysSlider.slider({
          css3: true,
          js: false,
          animation: 'slide', // fade  slide
          activeIndex: 0,
          interval: 0
      }); 

})(jQuery);

  優化後的最終版index.js

(function($) {
  'use strict';
  // foucs-slider
  var slider={};
  slider.$focusSlider=$('#focus-slider');
  slider.loadImg=function(url, imgLoaded, imgFailed) {
          var image = new Image();
          image.onerror = function() {
              if (typeof imgFailed === 'function') imgFailed(url);
          }
          image.onload = function() {
              if (typeof imgLoaded === 'function') imgLoaded(url);
          };
          image.src=url;     
          // setTimeout(function() {
          //     image.src = url;
          // }, 1000);
      };

      //懶加載
  slider.lazyLoad = function($elem) {
       $elem.items = {};
       $elem.loadedItemNum = 0;
       $elem.totalItemNum = $elem.find('.slider-img').length;
       $elem.on('slider-show', $elem.loadItem = function(e, index, elem) {
           console.log(1);
           if ($elem.items[index] !== 'loaded') {
               $elem.trigger('slider-loadItem', [index, elem]);
           }
       });
       $elem.on('slider-loadItem', function(e, index, elem) {
           // 按需加載
           var $imgs = $(elem).find('.slider-img');
           $imgs.each(function(_, el) { // _ 至關佔位,不使用該參數。
               var $img = $(el);
               slider.loadImg($img.data('src'), function(url) {
                   $img.attr('src', url);
                   $elem.items[index] = 'loaded';
                   $elem.loadedItemNum++;
                   console.log(index + ': loaded');
                   if ($elem.loadedItemNum === $elem.totalItemNum) {
                       // 所有加載完畢
                       $elem.trigger('slider-itemsLoaded');
                   }
               }, function(url) {
                   console.log('從' + url + '加載圖片失敗');
                   // 多加載一次
                   // 顯示備用圖片
                   $img.attr('src', '../img/focus-slider/placeholder.png');
               });
           });

       });

       $elem.on('slider-itemsLoaded', function(e) {
           console.log('itemsLoaded');
           // 清除事件
           $elem.off('slider-show', $elem.loadItem);
       });

  }


    slider.lazyLoad(slider.$focusSlider);
    slider.$focusSlider.slider({
          css3: true,
          js: false,
          animation: 'fade', // fade  slide
          activeIndex: 0,
          interval: 0
      });


  // todays-slider
    slider.$todaysSlider = $('#todays-slider');
    slider.lazyLoad(slider.$todaysSlider);
      slider.$todaysSlider.slider({
          css3: true,
          js: false,
          animation: 'fade', // fade  slide
          activeIndex: 0,
          interval: 0
      });

})(jQuery);
相關文章
相關標籤/搜索