jQuery實現淘寶輪播圖

時間 2019-11-09

標籤 jquery 實現淘寶欄目 JQuery 简体版

原文原文鏈接

我愛擼碼，擼碼使我感到快樂
你們好，我是Counter
今天給你們分享的是利用jQuery來實現淘寶輪播圖，揭開這層神祕的面紗，CSS樣式就不作過多的贅述了，主要就是實現的原理，也就是jQuery，老樣子，每行基本都打上了我理解的註釋，表達的可能不是很好，可是理解理解就OK，歡迎一塊兒技術探討，一塊兒成長。
再講講輪播圖的需求吧，一打開網址，輪播圖就會本身每3秒切換到下一張，總共5張，一直輪播，當你鼠標進入圖片區域，那麼圖片再也不自動輪播，你能夠點擊向左的按鈕，也能夠點擊向右的按鈕，你點左圖片就切到上一張，點右就切到下一張，而且你能夠點擊下面的小原點，點哪跑那張，而且鼠標離開，輪播圖又會本身每3秒跑起來，好了，廢話很少說，先上效果，能夠試試哦，應該沒bug，嘿嘿。。。
效果以下：
ps：若是效果出不來，那麼請刷新下頁面javascript

代碼給出:css

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘寶輪播圖</title>
    <!-- CSS樣式 -->
    <style>
        body, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrapper {
            width: 520px;
            margin: 50px auto 0;
            font-size: 0;
        }
        .box {
            position: relative;
            width: 520px;
            height: 280px;
            overflow: hidden;
        }
        .box .img-list {
            position: absolute;
            top: 0;
            left: 0;
            width: 3120px;
            height: 280px;
        }
        .box .img-list li {
            display: inline-block;
            width: 520px;
            height: 280px;
        }
        .box .img-list img {
            width: 520px;
        }
        .wrapper .box span {
            position: absolute;
            display: inline-block;
            top: 50%;
            margin-top: -25px;
            width: 30px;
            height: 50px;
            line-height: 47px;
            text-align: center;
            cursor: pointer;
            font-size: 18px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            z-index: 999;
            user-select: none;
        }
        .wrapper .box .left {
            left: 0;
            border-radius: 0 10px 10px 0;
        }
        .wrapper .box .right {
            right: 0;
            border-radius: 10px 0 0 10px;
        }
        .box .dot {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .dot .dot-list {
            display: inline-block;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }
        .dot-list .item {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 2px;
            cursor: pointer;
        }
        .dot-list .active {
            background-color: #ff6700;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
            <ul class="img-list">
                <li>
                    <a href="javascript:;">
                        <img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="http://ftp.nowamagic.net/librarys/images/92.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="http://img.mp.itc.cn/upload/20170706/88c62ffcfe8748a78e6b2d66c77ebbef_th.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="http://pic.58pic.com/58pic/16/17/72/24858PIC3hD_1024.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554278929&di=31b49ed3ef2bde4304c49a8632c79456&imgtype=jpg&er=1&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F12%2F15%2F584_20131215140559601.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt="">
                    </a>
                </li>
            </ul>
            <div class="dot">
                <ul class="dot-list">
                    <li class="item active"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                    <li class="item"></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- jQuery已在線移入,這邊註釋 -->
    <!-- <script src="../jquery-3.3.1.js"></script> -->
    <!-- jQuery -->
    <script>
        // 設置比較索引的最小值0，5
        var minNum = 0;
        var maxNum = 5;
        // 剛開始索引爲0
        var index = 0;
        // 設置一個計時器爲空
        var counter = null;
        // 設置最小移動距離520，由於這邊每張圖片都爲寬度520px，高度280px
        var limWidth = 520;

        // 設置自動輪播函數
        function autoMove() {
            // 若是計時器不爲空的話那麼跳出，計時器不爲空，說明當前有計時器在跑，那麼你就老老實實的跑當前的計時器，別給搞事
            if (counter != null) {
                return;
            }
            // 若是計時器爲空的話，那麼開啓一個每3秒執行一次autoPlay的函數
            counter = setInterval(autoPlay, 3000);
        }

        // 自動輪播函數，其實很簡單，向函數cliMove傳遞參數right，就比如，一我的每3秒點擊一次右邊的小按鈕，不過這變有電腦去執行
        function autoPlay() {
            cliMove('right');
        }
        // 執行函數，傳遞形參，表明方向
        function cliMove(direction) {
            // 由於在這邊有涉及到整個ul寬度的變化的動畫，stop()函數有兩個參數，涉及到jQuery動畫，第一個參數意思是，是否還要保留動畫隊列，false不保留，true保留。第二個參數意思是，是否當即執行完當前的動畫，true是，false不是，那這邊選擇true的緣由是我須要你當即響應當前用戶的操做，防止用戶快速點擊左右按鈕，移開鼠標，而動畫卻還在移動。這邊第一個參數填false或者true，已經影響不了什麼了，由於當前動畫當即執行，動畫隊列確定是沒有了，全部第一個參數填false或者true，已經不打緊了
            $('.img-list').stop( false, true );
            // 若是用戶點擊的是右邊的按鈕
            if ( direction == "right" ) {
                // 那麼索引值加1，沒點擊一次在原有基礎上加一次
                index++;
                // 若是索引值大於5了
                if ( index > 5) {
                    // 意味着用戶瀏覽到第六張了，而這邊第六張正是第一張，爲了實現無縫鏈接，因此這樣處理，看着只有5張，實際上頭尾兩張是同樣的，因此有六張
                    // 那麼將ul的left設置爲0，又回到了第一張，注意這邊是迅速移動到第一張，由於用了css屬性，而不是animate移動動畫
                    $('.img-list').css({
                        left: 0
                    })
                    // 同時將索引值設置爲1，注意這邊的1爲第二張，在大多數編程語言中，數組都是從0開始，JS也是同樣的
                    index = 1;
                }
            }
            // 若是傳遞用戶點擊的是左邊的按鈕
            else if ( direction == "left") {
                // 那麼索引值減1
                index--;
                // 若是索引值小於0的話，運用的原理跟上面雷同，意味着迅速移到第六張
                if ( index < 0 ) {
                    $('.img-list').css({
                        left: maxNum * -limWidth
                    })
                    // 同時索引值變爲4，意味着變爲第五張
                    index = 4;
                }
            }
            // 每次index變換時小原點的背景也跟着變換,與圖片一一對應,可是圖片一共是6張,小原點就5個,全部這邊進行判斷,若是index大於4的話就返回0即表明着第一個小原點,不然的話圖片就隨着index變化而變化
            dotMove($('.item').eq(index > 4 ? 0 : index));

            // 不關點擊的是左邊的仍是右邊的，最後結果都是要執行這句話的，這步是動畫移動的關鍵，
            // ul的left值設爲當前索引與每張圖片最小寬度的乘積，這邊的負值是意味着，這個ul定位相對於父級left的負值
            $('.img-list').animate({
                left: index * -limWidth
            });
        }

        // 綁定ul父級的鼠標進入，離開事件，jQuery鏈式調用，若是鼠標進入，那麼清空當前自動輪播的計時器，若是鼠標離開，那麼從新執行自動輪播的函數
        $('.box').mouseenter(function () {
            clearInterval(counter);
            counter = null;
        }).mouseleave(function () {
            autoMove();
        })

        //綁定點擊事件，若是點擊了右邊按鈕，那麼觸發函數cliMove，這個函數在上面已經詳細註釋了，並傳入right，圖片就會跟你按的次數，進行移動播放
        $('.right').click(function () {
            cliMove('right');
        }) 
        $('.left').click(function () {
            cliMove('left');
        })

        // 綁定下面小原點事件，若是點擊了其中任意一個小原點，那麼獲取到當前點擊的小原點的索引，而且賦值給index，而且執行函數cliMove，不傳入參數，由於此時，但願圖片與小原點一一對應       
        $('.item').click(function () {
            index = $(this).index();
            cliMove('');
        })

        // 點擊小原點後將會觸發cliMove函數，而且在這個函數中，執行了dotMove，移除當前小原點的CSS樣式，向dotMove函數傳入當前點擊的小原點所在的位置，而且設置其CSS樣式，即點擊的小原點背景變爲橘黃色
        function dotMove(dom) {
            $('.active').removeClass('active');
            dom.addClass('active');
        }

        // 當頁面刷新，先執行一邊自動輪播的函數，這個時候圖片就會本身輪播起來了
        autoMove();

    </script>
</body>
</html>

是否是感受用jQuery實現比原生JS方便太多了，便捷太多了，沒錯就是這樣滴。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。