这种图片切换的效果是如何实现的？

站长

2024年06月25日 09:24 · 阅读数 5

今天逛网站无意间看到一个有意思的图片轮播效果，就打算随手实现一下，没想到实现的效果总是不尽如人意，不知道哪里的问题

这是原样式这种图片切换的效果是如何实现的？

这是自己做的样式这种图片切换的效果是如何实现的？

贴下自己写的代码

<!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="./img/car1.jpeg" style="z-index: -1000;transform: translateX(-350px);">
      <img id="img2" src="./img/car2.jpeg" style="z-index: -1001;">
    </div>
    <div class="indicator">
      <img style="position: absolute;bottom: 40%;transform: translate(-50%,-50%);" src="./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>

1个回答

test

2024-06-25

考虑用div的background-image,然后改变div宽度达到你要的效果,而不是直接用img

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容