CSS多张图片横向切换是网站中常见的效果之一，能够让页面更加生动、有趣。本文就来简单介绍一下如何通过CSS来实现。
代码实现：
HTML结构：
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
CSS样式：
.slider {
width: 100%;
height: 500px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 100%;
float: left; /* 把图片都放在一行 */
}通过以上代码，我们可以实现多张图片横向切换的效果。其中，HTML中通过一个`
`标签将多个`![]()
`标签包含在内，CSS样式中设置了`slider`类的宽度、高度和溢出隐藏，`![]()
`标签设置了宽度、高度和浮动来实现横向排列。
接下来我们需要使用JavaScript来实现切换效果。
代码实现：
var images = document.querySelectorAll(".slider img"); /* 获取所有图片 */
var currentImageIndex = 0; /* 当前图片序号 */
function changeImage() {
/* 判断是否到了最后一张图片 */
if (currentImageIndex >= images.length - 1) {
currentImageIndex = 0;
} else {
currentImageIndex++;
}
/* 切换图片，通过设置第一张图片的marginLeft值实现 */
document.querySelector(".slider").style.marginLeft = (-100 * currentImageIndex) + "%";
}
setInterval(changeImage, 3000); /* 默认3秒切换一次 */通过以上代码，我们可以实现图片的切换效果。其中，JS代码中首先通过`querySelectorAll`方法获取了所有包含在`slider`元素中的图片，然后定义了一个变量`currentImageIndex`来表示当前图片的序号。接下来我们定义了一个`changeImage`函数来实现图片的切换，包括判断是否到了最后一张图片，以及通过设置第一张图片的`marginLeft`来实现切换。最后我们使用`setInterval`函数来定时触发`changeImage`函数，实现图片的自动播放。
至此，我们就成功地通过CSS和JavaScript实现了多张图片横向切换的效果，希望对大家有所帮助。