原生js中移动端无缝轮播实现原理(代码)

最新推荐文章于 2021-10-20 22:03:17 发布

silence^

最新推荐文章于 2021-10-20 22:03:17 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/lyclyc_/article/details/108043006

版权

本文介绍移动端无缝轮播的实现方法，通过利用手指移动事件，当浏览到第一张图片时跳转到第五张，而到达第八张时跳转到第四张，从而达到无缝效果。内容包括具体的JavaScript实现代码。

摘要由CSDN通过智能技术生成

比如要做四张图的无缝轮播，就需要八张图片，如下：
在这里插入图片描述
移动端中的手指移动事件，原理是：当点击到第一张图片时就定位到第五张，当点击到第八张图片时就定位到第四张。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/rem.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        ul,
        li {
            list-style: none;
        }
 
        .wrap {
            width: 11.25rem;
            /* 1125是一张图片的宽度 */
            height: 3.52rem;
            /* overflow: hidden; */
            position: relative;
        }
 
        .list {
            height: 3.52rem;
            width: 10000px;
            position: absolute;
            left: 0;
            top: 0;
        }
 
        .list li {
            width: 11.25rem;
            height: 3.52rem;
            float: left;
        }
 
        .list li img {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }
 
        .wrap nav {
            position: absolute;
            left: 0;
            bottom: 0.2rem;
            width: 100%;
            height: 0.4rem;
            text-align: center;
        }
 
        .wrap nav a {
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            vertical-align: top;
            background: red;
            border-radius: 50%;
        }
 
        .wrap nav a.active {
            background: white;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <!-- w1125 -->
        <ul class="list">
            <!-- w10000 -->
            <li><img src="img/img1.jpg" alt="">
                <!-- w1125 -->
            <span>1</span></li>
            <li><img src="img/img2.jpg" alt=""> <span>2</span></li>
            <li><img src="img/img3.jpg" alt=""> <span>3</span></li>
            <li><img src="img/img4.jpg" alt=""> <span>4</span></li>
            <li><img src="img/img1.jpg" alt=""> <span>假1</span></li>
            <li><img src="img/img2.jpg" alt=""> <span>假2</span></li>
            <li><img src="img/img3.jpg" alt=""> <span>假3</span></li>
            <li><img src="img/img4.jpg" alt=""> <span>假4</span></li>
        </ul>
        <nav>
            <a href="javascript:;" class="active"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </nav>
    </section>
    <script>
        var wrap =document.querySelector('.wrap');
        // wrap的宽度和一张图片的宽度是一样大的。
        // 获取图片宽度
        console.log(wrap)
        var liW=wrap.clientWidth;
        console.log(liW);
  
    var ul=document.querySelector('.list');
   
    // 获取所有a标签
    var a=document.querySelectorAll('a');
    ul.style.width = a.length*2 * liW + 'px';
    var ulL=0;
    var disX=0;
    //给Ul设置touchstart事件
      //   获取手指按在Ul上的时候  手指距离页面
    ul.addEventListener('touchstart',function(e){
        e.preventDefault();
        // console.log(e);
        var ev=e.changedTouches[0];
        // console.log(ev);//获取涉及当前事件的手指的一个列表。即为获取到记录手指信息的对象
        // 1，给disX和ulL两个变量重新赋值
        ulL=this.offsetLeft;//为什么用this
        //由于其定位父元素是wrap,只有1125的宽度，图片往左跑时，值是为负值的
        // 获取ul到定位
        disX=ev.pageX;//pageX就是用来记录手指距离页面左侧的距离
        // console.log(ulL,disX);
        ul.style.transition = 'none';//清除过渡 防止卡顿

        var n=Math.floor(ulL/liW);//即为超出父盒子的长度除以每个图片宽度。可以得到超出父盒子的长度包含多少个图片。若一张图片没有完全出去，就按照0个图片。
        
        //判断   如果当前手指按在真1上，就定义到假1
        if(n==0){
            n=a.length;//由于当前已经将Ul定位到第四张图片，因此n表示当前点击的图片的下标。
            // 如果当前手指按在真一上，就将Ul定义到假1。并且把ulL重新赋值
            ul.style.left = -n * liW + 'px';
            ulL=ul.offsetLeft;//更新ulL变量的值,即为-4*图宽
        
        }else if(-n==a.length*2-1){
            n=a.length-1;
            // 如果当前手指按在假四上，就将Ul定位到真四
            ul.style.left=-n*liW+'px';
            ulL=ul.offsetLeft;
         
        }

    })
    // 给ul绑定手指移动事件
    ul.addEventListener('touchmove',function(e){
        // 让ul跟着手指移动定位
         var ev=e.changedTouches[0];//为什么加下标0
        //  console.log(ev);
    
         ul.style.left = ev.pageX - disX + ulL + 'px';

    })
    ul.addEventListener('touchend',function(e){
        // 判断移动到了什么位置，如果已经有一大半从左侧超出父元素，就将Ul直接定位在下一个图片的位置，如果只要一小半超出左侧，就将ul定位回来。回到当前图片

        var n=Math.round(ul.offsetLeft/liW);//四舍五入
        // 设置过度
        ul.style.transition='left 0.2s';
        // n就使当前应该当ul定位到的图片，
        ul.style.left=n*liW+'px';
 //小点点跟随亮起  由于小点点只有四个  但是图片有八个 因此 我们需要让小点点跟随前四个图片亮 后四个图片处理一下在亮起
                //干掉所有人
                for(var i=0; i<a.length; i++){
                    a[i].className = '';
                }
                //复活我自己
                // if(-n<4){
                //     a[-n].className = 'active';
                // }else{
                //     var num = -n-4;//5
                //     a[num].className = 'active';
                // }
                a[-n%4].className = 'active';//0,1,2,3  4,5,6,7

    })
    </script>
</body>
</html>

下面是引入的js文件

// 设置一个函数
function auto() {
    // 声明一个变量等于当面设备的宽度
    var deviceWidth = document.documentElement.clientWidth;
    // console.log 打印到控制台
    // console.log(deviceWidth);

    // 根据设计图设置最大宽度
    if (deviceWidth > 1125) {
        deviceWidth =1125;
    }
    // 算出当前设备宽度的比例乘以100，就是当前设备的1rem等于的值
    var fs = (deviceWidth /1125) * 100;
    // 赋值给html
    document.documentElement.style.fontSize = fs + "px";
}

// 刚刷新触发一次
auto();

// 屏幕宽度改变时触发
window.onresize = function () {
    auto();
}