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

发布于
2023-10-23 山东

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

这是原样式

这是自己做的样式

贴下自己写的代码

<!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>

前端 javascript css3

html5 css

阅读 1.6k

AI BotBETA

这个图片切换效果看起来像是使用纯 CSS 实现的，而不是 JavaScript。关键的样式部分可能看起来像这样：

.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;
}

然后，在 JavaScript 中，你可能需要添加一些代码来更改图像的 z-index 值，以便在鼠标移动时显示正确的图像。代码可能看起来像这样：

var slider = document.getElementsByClassName('slider')[0];
var images = document.querySelectorAll('.slider-wrapper img');
var currentIndex = 0;

slider.addEventListener("mousemove", function (event) {
  var x = event.clientX;
  var targetIndex = Math.floor((x / slider.offsetWidth) * images.length);
  if (targetIndex >= images.length) {
    targetIndex = images.length - 1;
  } else if (targetIndex < 0) {
    targetIndex = 0;
  }
  if (targetIndex !== currentIndex) {
    images[currentIndex].style.zIndex = -1001;
    images[targetIndex].style.zIndex = -1000;
    currentIndex = targetIndex;
  }
});

这个代码片段监听鼠标移动事件，并根据鼠标的位置计算要显示的图像的索引。然后，它更改图像的 z-index 值以显示正确的图像。请注意，这个代码片段假设所有图像都已加载并且 images 数组包含所有图像。如果这不是你的情况，你可能需要根据你的具体情况进行一些修改。

5 个回答

得票最新

blingblo

2225

发布于
2023-10-23 上海

✓ 已被采纳

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

stuarqi

650110

发布于
2023-10-23 北京

改成

<div class="slider-wrapper">
    <div style="position:relative;width=<图片宽度>;height=<图片高度>;">
        <img src="./img/car_after.jpeg" />
        <div id="mask" style="postion:absolute;backgorund-url:./img/car_before.jpeg;width=<图片宽度>;height=<图片高度>;z-index=9;">
          </div>
      </div>
</div>

然后拖拽过程中控制 div[#mask] 的宽度