给大家分享一个很好看的轮播图，这个也是之前看到别人写的效果感觉很好看，所以后面也自己实现了一下，在这里分享给大家，希望大家也可以有所收获

轮播图效果：

视频效果有点浑浊，大家凑合着看，大家有什么好的截视频方法推荐我一下吧，非常感谢，孩子太难了

 

轮播图功能：

• 轮播图会有一个向左移动的视野效果
• 点击右边图片会向左更新
• 点击左边图片会向右更新
• 点击右边箭头会向左更新
• 点击左边箭头会向右更新
• 使用鼠标在图片上进行悬停，图片不会自动更新 
• 使用鼠标在小点上进行滑动，图片更新到对应的图片上

js实现思路：

获得我们的dom类：

下面有注释解释，大家结合注释进行理解

        // 小圆点的父类
        let dotul = document.querySelector('.dot ul')
        // 图片
        let one = document.querySelector('.one')
        let three = document.querySelector('.three')
        // 我们图片的大框架
        let carousel_map = document.querySelector('.carousel-map')
        // 左边箭头
        let lefticon = document.querySelector('.lefticon')
        // 右边箭头
        let righticon = document.querySelector('.righticon')
        // 图片的父ul
        let ul = document.querySelector('.ul-img')
        // 左边图片的位置
        let leftbox = document.querySelector('.leftbox')
        // 右边图片的位置
        let rightbox = document.querySelector('.rightbox')

小圆点：

动态添加图片下的小圆点，使用for循环使用createElement()创建li元素，然后将创建的li添加到ul当中，但是因为我们显示的有图片和圆点进行绑定，所以我们要给一个小圆点添加上一个不一样的样式，突出该圆点和图片的关联性，最开始我们要初始化一个小圆点，保证它可以和我们的第一个显示的图片相照应，这里我们首先显示的是第二个图片，所以在这里我们定义一个变量j为1，就是让我们的第二个小圆点进行显示，color（）方法是给我们的小圆点上色的方法

//添加小点点
   for (let i = 0; i < parts.length; i++) {
      let li = document.createElement('li')
      // 添加自定义属性
      li.setAttribute('index', i)
      dotul.appendChild(li)
    }
    let j = 1
    dotul.children[j].className = 'change'
    function color() {
      for (let i = 0; i < parts.length; i++) {
        dotul.children[i].className = ''
      }
        dotul.children[j].className = 'change'
      }

大家可以注意到我们的j变量是有范围的，也就是0-5，我们应该对 j 进行一些处理，所以我们需要写一个函数进行管理

function inspect() {
      if (j < 0) {
         j = 5
      } else if (j > 5) {
         j = 0
        }
      }

轮播图移动方法 left() 和 right () :

首先我们先定义一个parts数组，为的是让我们的图片类名进行更换

let parts = ['one', 'two', 'three', 'four', 'five', 'six']

大家看到这里可能不太了解，大家可以看以下的这些css代码（就是对以上类名的一些css操作）

.one {
        transform: translateX(-100px) scale(0.9);
        /* 初始位置和大小 */
        transition: transform 0.6s ease-out;
        /* 设置平滑过渡 */
        z-index: 4;
      }

      .two {
        transform: scale(1);
        /* 初始位置和大小 */
        transition: transform 0.6s ease;
        /* 设置平滑过渡 */
        z-index: 6;
      }

      .three {
        transform: translateX(100px) scale(0.9);
        /* 初始位置和大小 */
        transition: transform 0.5s ease-out;
        /* 设置平滑过渡 */
        z-index: 3;
      }

      .four {
        opacity: 0;
        transform: scale(0.9);
        z-index: 1;
      }

      .five {
        opacity: 0;
        transform: scale(0.9);
        z-index: 1;
      }

      .six {
        opacity: 0;
        transform: scale(0.9);
        z-index: 1;
      }

我们为什么要这么写呢，因为我们的图片放在的 li 元素使用了绝对定位（大家从我下面的总代码中可以看到）这样就可以让我们的图片叠加到一起（绝对定位加上相对定位的效果），这样就方便我们对图片的操作了，然后我们对第一张图片和第三张图片进行位置移动，产生偏差的视觉效果，并且进行缩小操作，突出显示我们的第二张中间图片

下面是 我们分装图片进行向左更新和向右更新的方法

right()

对我们的parts数组进行后删前增，这样我们的第三个图片的类变成了two，two类就是我们的中间图片，这样在通过css的transform和transition就实现了我们视频中的那种效果，然后图片进行更换了，我们的图片下的小圆点高光也进行更换（因为向左和向右的逻辑是一样的，这里我就不重复赘述了）

         function right() {
          // 将最后一个元素推到数组的前面
          parts.unshift(parts[5]) // 移动最后一个到最前面
          parts.pop()
          for (let i = 0; i < parts.length; i++) {
            if (ul.children[i]) {
              // 确保子元素存在
              ul.children[i].setAttribute('class', parts[i])
            }
          }
          j++
          inspect()
          color()
        }
        function left() {
          // 将最后一个元素推到数组的前面
          parts.push(parts[0]) // 移动最后一个到最前面
          parts.shift()
          for (let i = 0; i < parts.length; i++) {
            if (ul.children[i]) {
              // 确保子元素存在
              ul.children[i].setAttribute('class', parts[i])
            }
          }
          j--
          inspect()
          color()
        }

鼠标悬停小圆点：

 关于悬停小圆点进行图片更新操作大概是这部分轮播图当中难的了，大家可能不太好理解，其实还是图片通过图片和

         dotul.addEventListener('mouseover', function (e) {
          if (e.target.tagName === 'LI') {
            let index = parseInt(e.target.getAttribute('index'))
            let now = parts.indexOf('two') // 获取当前显示的元素索引
            let dif = Math.abs(index - now) // 计算经过点与当前点的距离

            clearInterval(timer) // 清除定时器

            // 使用一个新的定时器来逐步移动
            if (index < now) {
              while (dif--) {
                left()
              }
            } else {
              while (dif--) {
                right()
              }
            }
            timer = setInterval(right, 1500) // 重新设置自动播放定时器
          }
        })

 

图片停止自动播放：

carousel_map是我们总体元素的父类，当鼠标悬停到上面时，就停止播放，当离开时，重启定时器，图片的自动更新

        carousel_map.addEventListener('mouseover', function () {
          lefticon.style.display = 'block'
          righticon.style.display = 'block'
          clearInterval(timer)
        })

        carousel_map.addEventListener('mouseout', function () {
          lefticon.style.display = 'none'
          righticon.style.display = 'none'
          clearInterval(timer)
          timer = setInterval(right, 1500)
        })

图片图标的点击事件：

        lefticon.addEventListener('click', function () {
          clearInterval(timer)
          left()
          timer = setInterval(right, 1500)
        })

        righticon.addEventListener('click', function () {
          clearInterval(timer)
          right()
          timer = setInterval(right, 1500)
        })

        leftbox.addEventListener('click', function () {
          clearInterval(timer)
          left()
          timer = setInterval(right, 1500)
        })

        rightbox.addEventListener('click', function () {
          clearInterval(timer)
          right()
          timer = setInterval(right, 1500)
        })