本文主要介绍js在图片数组中实现图片切换的作用。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

写一个图片切换的小案例，巩固setAttribute的用法。setAttribute()方法可以向dom元素添加属性，指定属性值，如果属性已经存在，还可以更改属性值。

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

！文档类型html

超文本标记语言

头

meta charset='utf-8 '

标题/标题

/头

style type='text/css '

img {

宽度：400px

高度：400px

显示：块；

}

/风格

身体

img src='./imgs/t11.jpg' alt='' id='img '

按钮类型='按钮' id='上一个'上一个/按钮

button type=' button ' id=' Next ' Next/button

/body

脚本类型='文本/javascript '

var imgs=document . getelementbyid(' img ')

var next BTN=document . getelementbyid(' next ')

var prev BTN=document . getelementbyid(' prev ')

var imgArr=[

'./imgs/t11.jpg '，

'./imgs/哆啦a梦. jpg '，

'./imgs/peiqi.jpg '，

'./imgs/qiang.jpg '

]

var指数=0；

nextBtn.onclick=function() {

指数；

if (index imgArr.length - 1) {

指数=0

}

imgs.setAttribute('src '，imgArr[index])

}

prevBtn.onclick=function() {

索引-

如果(索引0) {

index=imgArr.length - 1

}

imgs.setAttribute('src '，imgArr[index])

}

/脚本

/html

效果是当点击下一张图片切换到数组中的下一张图片时，点击上一张图片切换到数组中的下一张图片。

初始界面是

点击下一张图片有如下效果

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。