登录
首页 >  文章 >  前端

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

时间：2024-11-21 12:54:50 409浏览 收藏

推广推荐
免费电影APP ➜
支持 PC / 移动端，安全直达

一分耕耘，一分收获！既然打开了这篇文章《图片轮播效果实现问题：使用 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">
      <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 标签。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>