css怎么做点击换图片 |css sprite mac

HTML结构：

<div class="imageBox">
<img src="image01.jpg" alt="图片01">
</div>
<div class="btnBox">
<button>更换图片</button>
</div>

以上是HTML结构样例：一张图片和一个按钮。大家需要用CSS实现点击按钮去更换图片的功能。

CSS样式：

.imageBox {
width: 400px;
height: 300px;
text-align: center;
}
.btnBox {
margin-top: 20px;
text-align: center;
}
button {
font-size: 18px;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
img + img {
display: none;
}

CSS代码中，大家定义了两个类，“imageBox”和“btnBox”，其中“imageBox”设置图片展示区的宽度、高度中心展示。 “btnBox” 指定按钮位置。”button” 设置按钮样式。”img+img” 选择器用以切换隐藏和显示图片。

JavaScript代码：

var btn = document.querySelector('button');
var images = document.querySelectorAll('.imageBox img');
btn.addEventListener('click', function () {
var showImage = document.querySelector('.imageBox img:not([style*="display: none"])');
var nextIndex = (Array.from(images).indexOf(showImage) + 1) % images.length;
showImage.style.display = 'none';
images[nextIndex].style.display = 'block';
});

JS代码中，大家首先获取按钮和所有图片元素。接着，大家给按钮添加点击事件，使用“querySelector”方法获取当前显示的图片元素，以及下一张图片需要显示的“nextIndex”值。然后，大家使用“style”方法把当前显示的图片隐藏，把下一张图片显示出来。

实现点击换图就是这样，只需要加入以上HTML、CSS、JS代码，就能在你的网页中实现交互效果。注意，CSS和JavaScript代码可以分别写在CSS和JS文件里，再引入到HTML文档中，或者在HTML的head或body部分分别用style和script标签内写入。