图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？

图片轮播效果实现问题：使用 transform: translatex 实现图片切换，为何效果不理想？

图片切换效果实现

问题：

本想实现一个常见的图片轮播效果，却多次碰壁，请指教问题所在。

效果展示：

原样式
自实现效果

代码：

<!DOCTYPE html>
<html>

<head>
  <style>
    .slider {
      width: 700px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    .slider-wrapper {
      width: 700px;
      height: 400px;
      position: relative;
    }

    .slider-wrapper img {
      width: 700px;
      height: 400px;
      position: absolute;
      top: 0;
    }

    .indicator {
      height: 100%;
      width: 2px;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 350px;
      z-index: 10;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      @@##@@
      @@##@@
    </div>
    <div class="indicator">
      @@##@@
    </div>
  </div>
  <script>
    var slider = document.getElementsByClassName('slider')[0]
    var indicator = document.getElementsByClassName('indicator')[0]
    // 监听鼠标移动事件
    slider.addEventListener("mousemove", function (event) {
      // 获取鼠标的坐标
      var x = event.clientX;
      // 设置div元素的位置
      indicator.style.left = x + "px";
      //修改图片的位置
      var wrapper = document.querySelector('.slider-wrapper');
      // wrapper.style.transform = 'translateX(-' + x + 'px)';
      var img1 = document.getElementById('img1')
      img1.style.transform = 'translateX(-' + x + 'px)';
      var img2 = document.getElementById('img2')

    });
  </script>
</body>

</html>

解答：

建议使用 div 元素的 background-image 属性，并通过改变 div 元素的宽度来实现图片的切换，而不是直接使用 img 标签。

图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？

以上就是图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？的详细内容，更多请关注其它相关文章！