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

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

原创

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

0 ·

CC 4.0 BY-SA版权

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

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

<!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