javascript - 这种图片切换的效果是如何实现的？
今天逛网站无意间看到一个有意思的图片轮播效果，就打算随手实现一下，没想到实现的效果总是不尽如人意，不知道哪里的问题
这是原样式
这是自己做的样式
贴下自己写的代码
<!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>共有5个答案
改成
<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。
应该就能达到你期望的效果了。
考虑用div的background-image,然后改变div宽度达到你要的效果,而不是直接用img
有没有可能是通过动态调节上面图片的宽度实现的
这个图片切换效果看起来像是使用纯 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 数组包含所有图像。如果这不是你的情况，你可能需要根据你的具体情况进行一些修改。
-
本文向大家介绍基于javascript实现图片切换效果，包括了基于javascript实现图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是
-
本文向大家介绍简单实现JavaScript图片切换效果，包括了简单实现JavaScript图片切换效果的使用技巧和注意事项，需要的朋友参考一下 JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画（可理解为使动画停止），为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数
-
Vue3如何实现像这个网站的图片自动切换效果 https://fortnite.gg/shop 这是我写的template 查看了该网站的效果是设置了两个class="animation"的盒子来做链接切换并且调整高度,但是我的每个item的图片数量不确定,有的为1,有的为2,3个,实在想不出来应该怎么实现了,可以请教大佬们一下思路吗
-
本文向大家介绍基于javascript实现图片左右切换效果，包括了基于javascript实现图片左右切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
-
本文向大家介绍jquery+css实现动感的图片切换效果，包括了jquery+css实现动感的图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右
-
本文向大家介绍JS实现可切换图片的幻灯切换效果示例，包括了JS实现可切换图片的幻灯切换效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现可切换图片的幻灯切换效果。分享给大家供大家参考，具体如下： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与