无缝轮播图手机端

最新推荐文章于 2020-10-12 20:20:46 发布

weixin_43370067

最新推荐文章于 2020-10-12 20:20:46 发布

阅读量200

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43370067/article/details/107169266

版权

原理：
如果轮播图一共有3张那么有需要有重复的三张图片以相同的结构放在后面，当按下第一张图片的时候因为第一张前面没有图了就直接跳转到第四张，进行滑动，如果滑动到了第6张，那么第六张后面没有图片了，就在按下的时候跳转到第三张。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/remScale.js"></script>
<style>
    *{
        padding: 0;
        margin: 0;list-style: none;
    }
    .wrap{
        width: 11.25rem;
        height: 3.52rem;
        overflow: hidden;
        position: relative;
    }
    ul{
        width: 100rem;
        height: 3.52rem;
        position: absolute;
        top: 0;
        left: 0;
    }
    ul li{
        width: 11.25rem;
        height: 3.52rem;
        float: left;
    }
    ul li img{
        width: 11.25rem;
        height: 3.52rem;
    }
    ol{
        width: 11.25rem;
        height: 0.5rem;
        position: absolute;
        bottom: 0;
        left: 0;
        text-align: center;
    }
    ol li{
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        display: inline-block;
        background: blue;
        vertical-align: top;
    }
    li.active{
        background: red;
    }

</style>
<body>
    <div class="wrap">
        <ul>
            <li><img src="./img/img1.jpg" alt=""></li>
            <li><img src="./img/img2.jpg" alt=""></li>
            <li><img src="./img/img3.jpg" alt=""></li>
            <li><img src="./img/img4.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <script>
        // 第一行： window.onload
        window.onload = function(){
            // 获取元素
            var ul = document.getElementsByTagName('ul')[0];
            var wrap = document.getElementsByClassName('wrap')[0];
            var lis = ul.getElementsByTagName('li');

            var cir = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
            console.log(cir);

            // 一张图片的宽  轮播图可视区的宽
            var w = wrap.clientWidth;

            // 复制ul中的li，再多加一组
            ul.innerHTML += ul.innerHTML;
            // 初始化ul的样式
            ul.style.width = lis.length * w + 'px';
            // console.log(wrap.clientWidth);

            // 存储当前是第几张图
            var n = 0;

            // 存储手指按下的时候的距离
            var disX = 0;
            // 手指按下的时候,
            ul.addEventListener('touchstart', function(ev){
                var touch = ev.changedTouches[0];
                console.log(touch.clientX);
                disX = touch.clientX;

                ul.style.transition = 'none';
                // 判断如果是第一张图，按下的时候，回到第五张图
                if(n == 0){
                    n = cir.length;
                    console.log(n);
                    ul.style.left = -n * w + 'px';
                }

                // 判断是最后一张， 按下的时候, 回到第四张图
                if(n == lis.length - 1){
                    n = cir.length - 1;
                    ul.style.left = -n * w + 'px';
                }
            });

            // 手指移动事件
            ul.addEventListener('touchmove', function(ev){
                var touch = ev.changedTouches[0]; // 事件触发的手指
                // console.log(touch.clientX, disX);
                console.log(ul.offsetLeft);
                // 求出手指移动的距离
                var l = disX - touch.clientX;
                ul.style.left = -l + ul.offsetLeft + 'px';
                // 更新手指的位置
                disX = touch.clientX;
            });

            // 手指抬起事件
            ul.addEventListener('touchend', function(){
                // 当手指抬起的时候，如果移动距离大于一半，切换到下一张， 如果移动距离小于一半, 回到当前这张;
                var allL = ul.offsetLeft; // 整个ul移动了的距离
                console.log(Math.round(allL / w));
                ul.style.transition = 'left 0.2s';
                ul.style.left = Math.round(allL / w) * w + 'px';
                n = -Math.round(allL / w);
                console.log(n);

                // 更新小圆点的样式  0-3   li： 0-7
                for(var i = 0; i < cir.length; i++){
                    cir[i].className = '';
                }
                cir[n % cir.length].className = 'active';
            }); 
        }

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