如何用JavaScript实现图片数组长尾词切换效果？

本文共计582个文字，预计阅读时间需要3分钟。

创建一个图片切换的小案例，演示如何使用 `setAttribute` 方法。`setAttribute` 方法可以给 DOM 元素添加属性或修改现有属性的值。

案例描述：- 页面中有一个图片容器。- 使用按钮控制图片的切换。- 点击按钮时，使用 `setAttribute` 方法更改图片的 `src` 属性来切换图片。

代码示例：

图片切换案例

说明：- 初始化时，图片显示为 `image1.jpg`。- 点击切换图片按钮时，`changeImage` 函数被触发。- 函数中通过获取当前图片的 `src` 属性值来判断是显示第一张图片还是第二张图片。- 使用 `setAttribute` 方法更改图片的 `src` 属性，从而实现图片的切换。

写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。

方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。