• 原生js实现轮播图及无缝滚动

    我这里主要说轮播图和无缝滚动的实现思路，就采用最简单的轮播图了，当然实现的思路有很多种，我这也只是其中一种。

    简单轮播图的大概结构是这样的，中间是图片，二边是箭头可以用来切换图片，下面的小圆点也可以用来切换图片。

    1.简易的轮播图效果

    先搭出html结构

     这里的左右箭头我采用的是svg图标

    1.   <div class="container">
    2.     <div class="carousel">
    3.       <div class="item"><a href=""><img src="./3.jpg" alt="">a>div>
    4.       <div class="item"><a href=""><img src="./2.jpg" alt="">a>div>
    5.       <div class="item"><a href=""><img src="./1.jpg" alt="">a>div>
    6.     div>
    7.     <div class="left">
    8.       <svg t="1693569521007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    9.         p-id="4000" width="20" height="20">
    10.         <path
    11.           d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
    12.           p-id="4001">path>
    13.       svg>
    14.     div>
    15.     <div class="right">
    16.       <svg t="1693569535119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    17.         p-id="4245" width="16" height="16">
    18.         <path
    19.           d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
    20.           p-id="4246">path>
    21.       svg>
    22.     div>
    23.     <div class="indicator">
    24.       <span class="active">span>
    25.       <span>span>
    26.       <span>span>
    27.     div>
    28.   div>

    然后是css样式

    1.   * {
    2.       margin: 0;
    3.       padding: 0;
    4.       box-sizing: border-box;
    5.     }
    6.  
    7.     .container {
    8.       width: 700px;
    9.       height: 400px;
    10.       margin: 10px auto;
    11.       overflow: hidden;
    12.       position: relative;
    13.     }
    14.  
    15.     .container .carousel {
    16.       width: 100%;
    17.       height: 100%;
    18.       display: flex;
    19.     }
    20.  
    21.     .container .carousel .item img {
    22.       width: 700px;
    23.       height: 400px;
    24.     }
    25.  
    26.     .container .indicator {
    27.       height: 30px;
    28.       position: absolute;
    29.       bottom: 10px;
    30.       left: 50%;
    31.       transform: translateX(-50%);
    32.     }
    33.  
    34.     .container .indicator span {
    35.       border: 1px solid #fff;
    36.       width: 20px;
    37.       height: 20px;
    38.       border-radius: 50%;
    39.       display: inline-block;
    40.     }
    41.  
    42.     .container .indicator span.active {
    43.       background-color: pink;
    44.     }
    45.  
    46.     .container .left {
    47.       position: absolute;
    48.       left: 10px;
    49.       top: 50%;
    50.     }
    51.  
    52.     .container .right {
    53.       position: absolute;
    54.       right: 10px;
    55.       top: 50%;
    56.     }

    css的关键代码是overflow:hidden,我这里开启的flex弹性盒，使用它可以将多出来的图片进行隐藏，然后其中的一个圆圈元素加上了active

     下面是js代码

    我们首先要获取到所有的dom元素

    1.   var doms = {
    2.     carousel: document.querySelector('.carousel'),
    3.     indicator: document.querySelectorAll('.indicator span'),
    4.     left: document.querySelector('.left'),
    5.     right: document.querySelector('.right')
    6.   }

    最重要的就是轮播的函数

    1. var curIndex = 0  //用于记录当前是第几个元素  
    2. function moveTo(index) {
    3.     //加上动画效果
    4.     doms.carousel.style.transition = 'transform .5s'
    5.     doms.carousel.style.transform = `translateX(-${index}00%)`
    6.     //去除效果
    7.     var active = document.querySelector('.indicator span.active')
    8.     active.classList.remove('active')
    9.     //选中当前效果
    10.     doms.indicator[index].classList.add('active')
    11.     curIndex = index
    12.   }

    我这里采用的是transform的translateX(-100%)来实现的轮播切换，也可以使用margin-left来控制都可以。

    接下来可以给加上一个定时器来控制它进行自动轮播

    1.  //添加图片自动轮播
    2.   let timer = setInterval(() => {
    3.     if (curIndex === doms.indicator.length - 1) {
    4.       moveTo(0)
    5.     } else (
    6.       moveTo(curIndex + 1)
    7.     )
    8.   }, 2000)

    也可以给下面的小圆圈和左右箭头加上对应的点击事件

    1.   //添加点击事件
    2.   doms.indicator.forEach((item, index) => {
    3.     item.addEventListener('click', () => {
    4.       moveTo(index)
    5.     })
    6.   })
    7.   //添加点击事件
    8.   doms.left.addEventListener('click', () => {
    9.     moveTo(curIndex-1)
    10.   })
    11.   doms.right.addEventListener('click', () => {
    12.      moveTo(curIndex+1)
    13.   })

    到这里其实已经实现的简易轮播图的基本功能，但是还并不完美，会存在防抖以及无法无缝滚动的效果

    2.无缝滚动及防抖

    无缝滚动的实现思路就是采用克隆的功能及改变动画效果来实现的

    就像这样，将最后一张复制出来放到最前面，但是展示的还是1.jpg，第一张复制放到最后面

     在切换到最后一张或者第一张时，首先将过度动画关掉切换，然后迅速开启过度动画轮播下一张，这样眼睛是无法察觉出来的，因为其速度很快。

     首先是克隆

    1.   //克隆图片，实现无缝滚动
    2.   function clone() {
    3.     var first = doms.carousel.firstElementChild.cloneNode(true);
    4.     //复制最后一张
    5.     var last = doms.carousel.lastElementChild.cloneNode(true);
    6.     //插入到最后
    7.     doms.carousel.appendChild(first);
    8.     //插入到最前
    9.     doms.carousel.insertBefore(last, doms.carousel.firstElementChild)
    10.     //将复制的第一张的位置调整
    11.     last.style.position = 'absolute';
    12.     last.style.transform = `translateX(-100%)`
    13.   }
    14.   clone()

    克隆的关键在于要将克隆的第一张图片改变一下位置

    然后实现右边箭头的无缝滚动

    1.   //实现右边的无缝滚动
    2.   var count = doms.indicator.length
    3.   function rightMove() {
    4.     //首先去除动画效果
    5.     if (curIndex === count - 1) {
    6.       doms.carousel.style.transform = `translateX(100%)`;
    7.       doms.carousel.style.transition = 'none';
    8.       //强制渲染，否则可能不会执行
    9.       doms.carousel.clientHeight;
    10.       moveTo(0)
    11.     } else {
    12.       moveTo(curIndex + 1)
    13.     }
    14.   }

    右边实现后左边就很简单了

    1.   //实现左边的无缝滚动
    2.   function leftMove() {
    3.  
    4.     if (curIndex === 0) {
    5.       doms.carousel.style.transform = `translateX(-${count}00%)`;
    6.       doms.carousel.style.transition = 'none';
    7.       //强制渲染
    8.       doms.carousel.clientHeight;
    9.       moveTo(count - 1)
    10.     } else {
    11.       moveTo(curIndex - 1)
    12.     }
    13.   }

    然后我们的定时器就需要进行一下改变，让他往右边轮播‘

    1.   //添加图片自动轮播
    2.   let timer = setInterval(() => {
    3.     rightMove()
    4.   }, 2000)

    然后在需要防抖的地方进行一下防抖，其实我这种很简单的防抖就是将定时器关闭掉，在点击任务完成后再开启定时器。

    1.  //添加点击事件
    2.   doms.indicator.forEach((item, index) => {
    3.     item.addEventListener('click', () => {
    4.       //关闭定时器
    5.       clearInterval(timer)
    6.       moveTo(index)
    7.       //执行完后开启定时器
    8.       timer = setInterval(() => {
    9.         rightMove()
    10.       }, 2000)
    11.     })
    12.   })

    左右箭头的点击事件

    1.  
    2.   //添加点击事件
    3.   doms.left.addEventListener('click', () => {
    4.     //关闭定时器
    5.     clearInterval(timer)
    6.     leftMove()
    7.     //开启定时器
    8.     timer = setInterval(() => {
    9.       rightMove()
    10.     }, 2000)
    11.   })
    12.   doms.right.addEventListener('click', () => {
    13.     //关闭定时器
    14.     clearInterval(timer)
    15.     rightMove()
    16.     //开启定时器
    17.     timer = setInterval(() => {
    18.       rightMove()
    19.     }, 2000)
    20.   })

    到这里就实现了简单的轮播图效果

    整体代码：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     * {
    10.       margin: 0;
    11.       padding: 0;
    12.       box-sizing: border-box;
    13.     }
    14.  
    15.     .container {
    16.       width: 700px;
    17.       height: 400px;
    18.       margin: 10px auto;
    19.       overflow: hidden;
    20.       position: relative;
    21.     }
    22.  
    23.     .container .carousel {
    24.       width: 100%;
    25.       height: 100%;
    26.       display: flex;
    27.  
    28.       /* transition: .5s; */
    29.     }
    30.  
    31.     .container .carousel .item img {
    32.       width: 700px;
    33.       height: 400px;
    34.     }
    35.  
    36.     .container .indicator {
    37.       height: 30px;
    38.       position: absolute;
    39.       bottom: 10px;
    40.       left: 50%;
    41.       transform: translateX(-50%);
    42.     }
    43.  
    44.     .container .indicator span {
    45.       /* background-color: #fff; */
    46.       border: 1px solid #fff;
    47.       width: 20px;
    48.       height: 20px;
    49.       border-radius: 50%;
    50.       display: inline-block;
    51.     }
    52.  
    53.     .container .indicator span.active {
    54.       background-color: pink;
    55.     }
    56.  
    57.     .container .left {
    58.       position: absolute;
    59.       left: 10px;
    60.       top: 50%;
    61.     }
    62.  
    63.     .container .right {
    64.       position: absolute;
    65.       right: 10px;
    66.       top: 50%;
    67.     }
    68.   style>
    69. head>
    70.  
    71. <body>
    72.   <div class="container">
    73.     <div class="carousel">
    74.       <div class="item"><a href=""><img src="./3.jpg" alt="">a>div>
    75.       <div class="item"><a href=""><img src="./2.jpg" alt="">a>div>
    76.       <div class="item"><a href=""><img src="./1.jpg" alt="">a>div>
    77.     div>
    78.     <div class="left">
    79.       <svg t="1693569521007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    80.         p-id="4000" width="20" height="20">
    81.         <path
    82.           d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
    83.           p-id="4001">path>
    84.       svg>
    85.     div>
    86.     <div class="right">
    87.       <svg t="1693569535119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    88.         p-id="4245" width="16" height="16">
    89.         <path
    90.           d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
    91.           p-id="4246">path>
    92.       svg>
    93.     div>
    94.     <div class="indicator">
    95.       <span class="active">span>
    96.       <span>span>
    97.       <span>span>
    98.     div>
    99.   div>
    100. body>
    101. <script>
    102.   var doms = {
    103.     carousel: document.querySelector('.carousel'),
    104.     indicator: document.querySelectorAll('.indicator span'),
    105.     left: document.querySelector('.left'),
    106.     right: document.querySelector('.right')
    107.   }
    108.   var curIndex = 0
    109.   function moveTo(index) {
    110.     //加上动画效果
    111.     doms.carousel.style.transition = 'transform .5s'
    112.     doms.carousel.style.transform = `translateX(-${index}00%)`
    113.     //去除效果
    114.     var active = document.querySelector('.indicator span.active')
    115.     active.classList.remove('active')
    116.     //选中当前效果
    117.     doms.indicator[index].classList.add('active')
    118.     curIndex = index
    119.   }
    120.   //添加点击事件
    121.   doms.indicator.forEach((item, index) => {
    122.     item.addEventListener('click', () => {
    123.       //关闭定时器
    124.       clearInterval(timer)
    125.       moveTo(index)
    126.       //执行完后开启定时器
    127.       timer = setInterval(() => {
    128.         rightMove()
    129.       }, 2000)
    130.     })
    131.   })
    132.   //添加图片自动轮播
    133.   let timer = setInterval(() => {
    134.     rightMove()
    135.   }, 2000)
    136.  
    137.   //克隆图片，实现无缝滚动
    138.   function clone() {
    139.     var first = doms.carousel.firstElementChild.cloneNode(true);
    140.     //复制最后一张
    141.     var last = doms.carousel.lastElementChild.cloneNode(true);
    142.     //插入到最后
    143.     doms.carousel.appendChild(first);
    144.     //插入到最前
    145.     doms.carousel.insertBefore(last, doms.carousel.firstElementChild)
    146.     //将复制的第一张的位置调整
    147.     last.style.position = 'absolute';
    148.     last.style.transform = `translateX(-100%)`
    149.   }
    150.   clone()
    151.  
    152.   //实现右边的无缝滚动
    153.   var count = doms.indicator.length
    154.   function rightMove() {
    155.     //首先去除动画效果
    156.     if (curIndex === count - 1) {
    157.       doms.carousel.style.transform = `translateX(100%)`;
    158.       doms.carousel.style.transition = 'none';
    159.       //强制渲染
    160.       doms.carousel.clientHeight;
    161.       moveTo(0)
    162.     } else {
    163.       moveTo(curIndex + 1)
    164.     }
    165.   }
    166.   //实现左边的无缝滚动
    167.   function leftMove() {
    168.  
    169.     if (curIndex === 0) {
    170.       doms.carousel.style.transform = `translateX(-${count}00%)`;
    171.       doms.carousel.style.transition = 'none';
    172.       //强制渲染
    173.       doms.carousel.clientHeight;
    174.       moveTo(count - 1)
    175.     } else {
    176.       moveTo(curIndex - 1)
    177.     }
    178.   }
    179.  
    180.   //添加点击事件
    181.   doms.left.addEventListener('click', () => {
    182.     //关闭定时器
    183.     clearInterval(timer)
    184.     leftMove()
    185.     //开启定时器
    186.     timer = setInterval(() => {
    187.       rightMove()
    188.     }, 2000)
    189.   })
    190.   doms.right.addEventListener('click', () => {
    191.     //关闭定时器
    192.     clearInterval(timer)
    193.     rightMove()
    194.     //开启定时器
    195.     timer = setInterval(() => {
    196.       rightMove()
    197.     }, 2000)
    198.   })
    199. script>
    200.  
    201. html>

     

  • 相关阅读:
    设计模式——备忘录模式(memento)
    flask自定义序列化
    [机缘参悟-77]：深度思考-职场中注意事项-管理者版
    C++ 练气期之指针所指何处
    【服务器数据恢复】MDisk重建，vdisk丢失导致数据库不可用的数据恢复案例
    数据结构-静态链表创建
    转行IC第一步：应该怎么选择公司和岗位?
    calibre和cpolar搭建一个私有的网络书库
    visual-studio-code通过跳板机连接远程服务器的配置操作
    AutoJs学习-2048全自动
  • 原文地址：https://blog.csdn.net/m0_64642443/article/details/132629979