C C++最全js移动端轮播图_移动端轮播图js代码，2024年最新2024大厂C C++知识点总结+面试题解析

本文链接：https://blog.csdn.net/2401_84978673/article/details/138871445

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

第二步：

自动播放功能-无缝滚动
注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
此时需要添加检测过渡完成事件 transitionend
判断条件：如果索引号等于 3 说明走到最后一张图片，此时索引号要复原为 0
此时图片，去掉过渡效果，然后移动
如果索引号小于0，说明是倒着走，索引号等于2
此时图片，去掉过渡效果，然后移动

第三步：

小圆点跟随变化效果
把ol里面li带有current类名的选出来去掉类名 remove
让当前索引号的小li 加上 current add
但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里面

第四步：

手指滑动轮播图
本质就是ul跟随手指移动，简单说就是移动端拖动元素
触摸元素touchstart：获取手指初始坐标
移动手指touchmove：计算手指的滑动距离，并且移动盒子
离开手指touchend: 根据滑动的距离分不同的情况
如果移动距离小于某个像素就回弹原来位置
如果移动距离大于某个像素就上一张下一张滑动。
滑动也分为左滑动和右滑动判断的标准是移动距离正负如果是负值就是左滑反之右滑
如果是左滑就播放下一张（index++）
如果是右滑就播放上一张 (index–)

实现代码

html 文件里面写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <style>
        
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        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;
            background-color: #F2F2F2;
        }
        .box {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 300px;
        }

        ul {
            overflow: hidden;
            margin-left: -100%;
            width: 500%;
        } 
        ul li {
            float: left;
            width: 20%;
        }
        
        img {
            width: 100%;
            height: 300px
        }
        ol {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        ol li {
            width: 10px;
            height: 10px;
            display: inline-block;
            background-color: red;
            border-radius: 4px;
            transition: all .1s;
        }
        
        .color {
            width: 20px;
        }
    </style>
    <script src="17-移动轮播图.js"></script>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="images/33.webp" alt=""></li>
            <li><img src="images/11.webp" alt=""></li>
            <li><img src="images/22.webp" alt=""></li>
            <li><img src="images/33.webp" alt=""></li>
            <li><img src="images/11.webp" alt=""></li>
        </ul>
        <ol>
            <li class="color"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
</html>

js 文件里面的代码如下：

window.addEventListener('load', function () {
    var box = document.querySelector('.box');
    var ul = box.children[0];
    var ol = box.children[1];
    var w = box.offsetWidth;
    var index = 0;
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all 1s'
        ul.style.transform = 'translateX(' + translatex + 'px)'
    }, 2000)
    ul.addEventListener('transitionend', function () {
        if (index >= 3) {
            index = 0;
            // 利用最新索引号乘以宽度，去滚动图片
            var translatex = -index * w;
            // 去掉过渡效果，这样我们的ul 快速跳到目标位置
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translatex + 'px)'
        }
        if (index < 0) {


![img](https://img-blog.csdnimg.cn/img_convert/74cb6f96530f07894afaa8897b267742.png)
![img](https://img-blog.csdnimg.cn/img_convert/289287b37030277bbb11ab4528de0d22.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**