實現輪播圖

思路

實現動畫

• 構建一個滑條，這個滑條包含banner1,banner2,banner3,banner4,banner1圖片，設置這個滑條的display:flex，
• 圖片水平鋪展為一個滑條
• 設置滑條的父級元素高度為圖片的高度（通過監聽window.load事件實現）

$(w).on(‘load resize‘, function(e){
    $(‘div.banner‘).each(function(){
        $(this).height($(this).find(‘img‘).first().height())
    })
});

• 用jQuery animate 滑條的 css left 屬性來實現動畫

$(‘.banner-pic-slider‘).stop().animate({
    ‘left‘ : -num * bannerWidth  + ‘px‘
}, 2000, function(){
    if(callback){
        callback();
    }
});

• 實現切換當前圖片的功能
• 用一個變量標記當前是第幾張圖
• 根據要切換第幾張圖切換
• 為了實現循環效果，最後一張圖切換回第一張圖會有所不同

var selectPic = function(num, callback){
    num = num || 0;
    currentNum = num % 4
 
;
    if (num != 4){
        $(‘.pagination-item‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
        var bannerWidth = $(‘.banner‘).width();
        $(‘.banner-pic-slider‘).stop().animate({
            ‘left‘ : -num * bannerWidth  + ‘px‘
        }, 2000, function(){
            if(callback){
 

                callback();
            }
        });
        return 
    }

    // 到最後一張圖 產生循環效果 繼續往右拉 然後設置 left 0
    $(‘.pagination-item‘).eq(0).addClass(‘active‘).siblings().removeClass(‘active‘);
    var bannerWidth = $(‘.banner‘).width();
    $(‘.banner-pic-slider‘).stop().animate({
        ‘left‘ : -4 * bannerWidth  + ‘px‘
    }, 2000, function(){
        $(this).css({
            "left" : 0
        });
        if(callback){
            callback();
        }
    });

    
};

實現循環播放

• 編寫setBannerAutoPlay方法，具有關閉自動播放和開始自動播放的功能
• 設置點擊pagination區域觸發 關閉自動播放，點擊造成的jQuery動畫結束後再開始播放
• 播放到最後一張圖時，再往後拉一張圖，然後設置left為0

var setBannerAutoPlay = (function(){
    var playing = false;
    var intervalId = 0;
    return function(play){
        // 如果要播放
        
        if (play){
            if (playing){
                return
            }
            intervalId = setInterval(function(){
                selectPic(currentNum + 1)
            }, 3000);
            console.log(‘play start‘);

            playing = true;
            return
        }
        // 如果要停止
        if ( playing ){
            clearInterval(intervalId);
            playing = false;
            console.log(‘play stop‘);
        }    
    }
    
})();

實現點擊切換

• 監聽pagination區域的click事件， 通過$(.pagination-item).parent().children().index(this) 獲得點擊了第幾塊
• 編寫selectPic(num, callback) 函數，根據 num 切換圖片 主要是jQuery動畫

$(‘.pagination-item‘).on(‘click‘,function(){
    setBannerAutoPlay(false)

    var num = $(this).parent().children().index(this);
    selectPic(num, function(){
        setBannerAutoPlay(true);

    });
});

全部代碼

<div class="banner">
    <div class="banner-pic-slider">
        <img class="active" src="img/banner1.jpg" alt="">
        <img class="" src="img/banner2.jpg" alt="">
        <img class="" src="img/banner3.jpg" alt="">
        <img class="" src="img/banner4.jpg" alt="">
        <img class="" src="img/banner1.jpg" alt="">    
    </div>
    
    <div class="pagination">
        <div class="pagination-item active"></div>
        <div class="pagination-item"></div>
        <div class="pagination-item"></div>
        <div class="pagination-item"></div>
    </div>
</div>

/*輪播圖*/
div.banner{
    width: 100%;
    position: relative;
    overflow: hidden;
}
div.banner-pic-slider{
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    left: 0;
}
div.banner img{
    width: 6.4rem;
    flex: 0 0 auto;
    height: 100%;
}

div.banner div.pagination{
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    width: calc( .16rem * 6);
    left: 0;
    right: 0;
    margin: 0 auto;
    cursor: pointer;
}

div.pagination-item{
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    background: #ccc;

}

div.pagination-item.active{
    background: #fff;
}

(function(w, d){
    // 修改 banner 寬度為內部圖片寬度
    var currentNum = 0;
    $(w).on(‘load resize‘, function(e){
        $(‘div.banner‘).each(function(){
            $(this).height($(this).find(‘img‘).first().height())
        })
    });

    // 改變當前圖片
    var selectPic = function(num, callback){
        num = num || 0;
        currentNum = num % 4;
        if (num != 4){
            $(‘.pagination-item‘).eq(num).addClass(‘active‘).siblings().removeClass(‘active‘);
            var bannerWidth = $(‘.banner‘).width();
            $(‘.banner-pic-slider‘).stop().animate({
                ‘left‘ : -num * bannerWidth  + ‘px‘
            }, 2000, function(){
                if(callback){
                    callback();
                }
            });
            return 
        }

        // 到最後一張圖 產生循環效果 繼續往右拉 然後設置 left 0
        $(‘.pagination-item‘).eq(0).addClass(‘active‘).siblings().removeClass(‘active‘);
        var bannerWidth = $(‘.banner‘).width();
        $(‘.banner-pic-slider‘).stop().animate({
            ‘left‘ : -4 * bannerWidth  + ‘px‘
        }, 2000, function(){
            $(this).css({
                "left" : 0
            });
            if(callback){
                callback();
            }
        });

        
    };

    // 0 停止 1 開始
    var setBannerAutoPlay = (function(){
        var playing = false;
        var intervalId = 0;
        return function(play){
            // 如果要播放
            
            if (play){
                if (playing){
                    return
                }
                intervalId = setInterval(function(){
                    selectPic(currentNum + 1)
                }, 3000);
                console.log(‘play start‘);

                playing = true;
                return
            }
            // 如果要停止
            if ( playing ){
                clearInterval(intervalId);
                playing = false;
                console.log(‘play stop‘);
            }    
        }
        
    })();
    setBannerAutoPlay(true);
    // 點擊pagination顯示當前圖片
    $(‘.pagination-item‘).on(‘click‘,function(){
        setBannerAutoPlay(false)

        var num = $(this).parent().children().index(this);
        selectPic(num, function(){
            setBannerAutoPlay(true);

        });
    });

})(window, document);

輪播圖的實現