使用JavaScript实现按钮控制图片切换

本文主要介绍了如何使用JavaScript实现一个简单的图片轮播功能，用户可以通过点击“上一张”和“下一张”按钮来切换显示的图片。示例代码包括HTML结构、CSS样式以及JavaScript逻辑。 首先，HTML部分创建了一个包含图片、描述文本和两个按钮的基本布局。图片元素设置为默认显示第一张图片，而描述文本用于显示当前图片的索引和总图片数。两个按钮分别对应“上一张”和“下一张”的操作。 在CSS样式中，主要设置了容器`#div`的宽度、高度和背景色，并使按钮在鼠标悬停时显示指针光标，以提高用户体验。 JavaScript的核心在于处理图片的切换逻辑。首先，`window.onload`确保所有DOM元素加载完成后才执行脚本。通过`getElementsByTagName`获取到图片元素，即使只有一个图片，返回的仍然是一个NodeList对象。接着，定义一个数组`shuzu`存储所有图片的URL，然后获取到“上一张”和“下一张”按钮的引用，以及用于显示图片描述的`p_desc`元素。 初始索引设为0，表示当前显示的是第一张图片。图片描述文本初始化为当前图片的索引和总数。之后，为两个按钮添加事件监听器，当点击“上一张”按钮时，如果当前索引不是0，则减1；反之，如果点击“下一张”按钮且索引未达到数组末尾，则加1。每次切换图片后，都需要更新图片的`src`属性以及描述文本的内容，显示当前选中的图片信息。 这个简单的图片轮播实现，虽然没有包括自动切换或过渡效果，但它提供了一个基础的交互框架，可以根据需求进一步扩展和完善。例如，可以添加自动播放功能，或者使用CSS动画实现平滑的图片过渡效果。