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

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

这是原样式

这是自己做的样式

贴下自己写的代码

<!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.6k
avatarAI 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 个回答
✓ 已被采纳

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

image.png
改成

<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] 的宽度

有没有可能是通过动态调节上面图片的宽度实现的

从这个效果来看,首先要保证原图中的车子是没有的,也就是说应该是被扣出来的。

你这边既然已经有单独的车子了,那么可以用这个车子做遮罩,与原图做处理,通过 mask 属性让原图中的车子镂空。

镂空后的原图通过定位叠在车子下面,这样的话,移动原图的时候,应该就是改变原图的宽度 width

应该就能达到你期望的效果了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题