这种图片切换的效果是如何实现的？-灵析社区

今天逛网站无意间看到一个有意思的图片轮播效果，就打算随手实现一下，没想到实现的效果总是不尽如人意，不知道哪里的问题 这是原样式  这是自己做的样式  贴下自己写的代码 .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; } 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') });