图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？-css教程-PHP中文网

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

碧海醫心

发布： 2024-11-06 22:18:12

原创

932人浏览过

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

图片切换效果实现

问题：

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

效果展示：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

原样式
自实现效果

代码：

<!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">
      <img id="img1" src="./https://segmentfault.com/img/car1.jpeg" style="z-index: -1000;transform: translateX(-350px);">
      <img id="img2" src="./https://segmentfault.com/img/car2.jpeg" style="z-index: -1001;">
    </div>
    <div class="indicator">
      <img style="position: absolute;bottom: 40%;transform: translate(-50%,-50%);" src="./https://segmentfault.com/img/diff-indicator-circle.svg"
        alt="">
    </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 实现图片切换，为何效果不理想？的详细内容，更多请关注php中文网其它相关文章！