css实现图片之间的切换 |css 动态波浪

首先，在 HTML 文件中准备好需要展示的图片。大家可以使用 img 标签来插入图片，并使用 id 属性给每张图片取一个唯一的标识符。

<img id="pic1" src="1.jpg" alt="pic1">
<img id="pic2" src="2.jpg" alt="pic2">
<img id="pic3" src="3.jpg" alt="pic3">

接着，在 CSS 文件中使用 display 属性来控制图片的显示和隐藏。

img {
display: none;
}
#pic1 {
display: block;
}

这段 CSS 代码的作用是将所有的图片都隐藏起来，然后将第一张图片（id 为 pic1）显示出来。

接下来，大家需要使用 JavaScript 来控制图片的切换。大家可以给一个按钮加上点击事件，在点击按钮时将当前显示的图片隐藏，然后将下一张图片（或者第一张图片）显示出来。

<button id="btn">Click me</button>
<script>
var i = 1;
var btn = document.getElementById('btn');
btn.onclick = function() {
var currentPic = document.getElementById('pic' + i);
currentPic.style.display = 'none';
i++;
if (i >3) {
i = 1;
}
var nextPic = document.getElementById('pic' + i);
nextPic.style.display = 'block';
}
</script>

这段 JavaScript 代码的作用是给 ID 为 btn 的按钮加上点击事件，每次点击时将当前显示的图片隐藏起来，然后将下一张图片显示出来。注意，大家给每张图片都定义了一个唯一的 ID，所以可以通过拼接字符串的方式来获取图片元素。

到此为止，大家就成功地实现了图片之间的切换效果。这种切换方式不仅优雅美观，而且代码简单易懂，非常适合入门级开发者学习。