原生js实现无缝轮播图

Raften

已于 2022-05-11 23:50:25 修改

阅读量362

点赞数

分类专栏：原生js 文章标签： javascript css3 css

于 2022-05-11 22:27:45 首次发布

本文链接：https://blog.csdn.net/qq_45679368/article/details/124720594

版权

思路

无缝切换

假设这是图片数组[0,1,2,3,4] 共5张图片，index是4的时候点击下一张，要切换成第1张，而不是从4->3->2->1->0这样滚回去，也就是说其实是这样的效果 [0,1,2,3,4,0] 实现4->0的无缝切换。
从0->4也是同样的道理，0在点击上一张的时候，瞬间切换到4后面的0，然后再切换到4.

节流

防抖简单来说就是打断回城，需要重新回城，
节流就是cd。
当最后一张图片切换到第一张图片时，快速点击会出现闪屏的现象，因此可以限制点击速率来实现。设置一个lock变量，点击后值设置为false，在点击xx毫秒后再设置true。使用setTimeout实现

代码

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">
    <link rel="stylesheet" href="style.css">
    <title>轮播图</title>
</head>
<body>
    <!-- 容器 -->
    <div class="box">
        <!-- 图片列表 -->
        <div class="img-list">
            <img src="pic/1.png" alt="">
            <img src="pic/2.png" alt="">
            <img src="pic/3.png" alt="">
            <img src="pic/4.png" alt="">
            <img src="pic/5.png" alt="">
        </div>
        <!-- 小箭头 -->
        <div class="arrow">

最低0.47元/天解锁文章

Raften

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js实现无缝轮播图

思路无缝切换假设这是图片数组[0,1,2,3,4] 共5张图片，index是4的时候点击下一张，要切换成第1张，而不是从4->3->2->1->0这样滚回去，也就是说其实是这样的效果 [0,1,2,3,4,0] 实现4->0的无缝切换。从0->4也是同样的道理，0在点击上一张的时候，瞬间切换到4后面的0，然后再切换到4.节流防抖简单来说就是打断回城，需要重新回城，节流就是cd。当最后一张图片切换到第一张图片时，快速点击会出现闪屏的现象，因此可以限制点击速
复制链接

扫一扫