JavaScript 移動端輪播圖-有解無憂

代碼實作：

mobileAutoPlay.html（復制并保存為html檔案，打開并切換為移動端顯示，即可見效果）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/normalize.css">
    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.css">
    <script src="https://blog-static.cnblogs.com/files/jacklzx/mobileAutoPlay.js"></script>
</head>

<body>
    <!-- 焦點圖 -->
    <div >
        <ul>
            <li>
                <img src="https://img.uj5u.com/2020/10/22/156429221247231.jpg" alt="">
            </li>
            <li>
                <img src="https://img.uj5u.com/2020/10/22/156429221247232.jpg" alt="">
            </li>
            <li>
                <img src="https://img.uj5u.com/2020/10/22/156429221247233.jpg" alt="">
            </li>
            <li>
                <img src="https://img.uj5u.com/2020/10/22/156429221247231.jpg" alt="">
            </li>
            <li>
                <img src="https://img.uj5u.com/2020/10/22/156429221247232.jpg" alt="">
            </li>
        </ul>
        <!-- 小圓點 -->
        <ol>
            <li ></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>

</html>

mobileAutoPlay.css：

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    color: #000;
    background: #f2f2f2;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

div {
    box-sizing: border-box;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #222;
}

.focus {
    overflow: hidden;
    position: relative;
    margin-top: 44px;
}

.focus ul {
    overflow: hidden;
    width: 500%;
    margin-left: -100%;
}

.focus ul li {
    float: left;
    width: 20%;
}

.focus img {
    width: 100%;
}

.focus ol {
    position: absolute;
    bottom: 5px;
    right: 5px;
    margin: 0;
}

.focus ol li {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #fff;
    list-style: none;
    border-radius: 4px;
    transition: all .3s;
    margin-left: 1px;
}

.focus ol .current {
    width: 15px;
}

mobileAutoPlay.js：

window.addEventListener('load', function() {
    // 1. 獲取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    // 獲取focus的寬度
    var w = focus.offsetWidth;
    var ol = focus.children[1];

    // 2. 定時器輪播圖片
    var index = 0;
    var timer = setInterval(function() {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 1000);

    // 等過渡完成后再判斷
    ul.addEventListener('transitionend', function() {
        // 無縫滾動
        if (index >= 3) {
            index = 0;
            // 去掉過渡效果 這樣讓我們的ul 快速的跳到目標位置
            ul.style.transition = 'none';
            // 利用最新的索引號乘以寬度 去滾動圖片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        // 3.小圓點跟隨變化
        // ol中的li帶有current型別的選出來，洗掉類名
        ol.querySelector('.current').classList.remove('current');
        // 當前索引號加上current類名
        ol.children[index].classList.add('current');
    });
    // 4. 手指滑動輪播圖
    // 觸摸元素touchstart：獲取手指初始坐標
    var startX = 0;
    var moveX = 0;
    var flag = false;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        // 手指觸摸的時候，停止定時器
        clearInterval(timer);
    });
    // 移動手指 touchmove：計算手指滑動的距離，并且移動盒子
    ul.addEventListener('touchmove', function(e) {
        // 計算移動距離
        moveX = e.targetTouches[0].pageX - startX;
        // 移動盒子：盒子原來的距離+手指移動的距離
        var translatex = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true;
        e.preventDefault(); // 阻止滾動螢屏的默認行為
    });
    // 手指離開，根據滑動的距離判斷是否到下一張
    ul.addEventListener('touchend', function() {
        // 移動大于50像素，滑動
        if (flag) {
            if (Math.abs(moveX) > 100) {
                // 右滑
                if (moveX > 0) {
                    index--;
                    // 左滑
                } else if (moveX < 0) {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else {
                // 移動小于50像素，回彈
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        // 重新開啟定時器，開啟之前先清除定時器，保證當前只有一個定時器
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 1000);

    });
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/185478.html

標籤：其他

上一篇：jquery height width

下一篇：JavaScript 常見移動端網頁特效