图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？
一分耕耘，一分收获！既然打开了这篇文章《图片轮播效果实现问题：使用 transform: translateX 实现图片切换，为何效果不理想？》，就坚持看下去吧！文中内容包含等等知识点…希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！
图片切换效果实现
问题：
本想实现一个常见的图片轮播效果，却多次碰壁，请指教问题所在。
效果展示：
- 原样式
- 自实现效果
代码：
<!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="./https://segmentfault.com/img/car1.jpeg" style="z-index: -1000;transform: translateX(-350px);">
<img id="img2" src="./https://segmentfault.com/img/car2.jpeg" style="z-index: -1001;">
</div>
<div class="indicator">
<img style="position: absolute;bottom: 40%;transform: translate(-50%,-50%);" src="./https://segmentfault.com/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>
解答：
建议使用 div 元素的 background-image 属性，并通过改变 div 元素的宽度来实现图片的切换，而不是直接使用 img 标签。
以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持米云！更多关于文章的相关知识，也可关注米云公众号。
- Go 中 Channel 配合 Select 的意义：为什么在处理多个 Channel 时，Select 比直接接收更有效？
