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

本文分享JavaScript在图片间切换的具体代码，供大家参考。具体内容如下

代码的主要思路：

1.首先，绑定“下一个”和“上一个”按钮，点击响应事件；

2.获取img标签对象，用于修改src属性值，实现图片的切换；

3.切换图片本质上是修改img标签中src属性的值；

4.创建一个数组来保存图片。这样在画面切换的过程中操作起来会更加方便。只需操作数组的索引。如果要切换到下一个，只需设置imgar [0]-imgar [1]即可；

5.创建一个变量来保存当前显示图片的索引，这样更容易操作图片；

6.需要注意的是，如果当前显示的图片是最后一张，下一张会自动跳回第一张；同样，如果当前显示的图片是第一张，前一张会自动跳回最后一张；

7.要设置顶部文本，先获取对应的P label对象；

8.通过修改P标签中的文本，可以实现顶部文本的实时转换；

！文档类型html

html lang=en

头

meta charset=UTF-8

图片切换练习/标题

style type=text/css

* {

边距：0；

填充：0；

}

#外部{

宽度：500px

边距：50px自动；

填充：30px

背景色：海蓝宝石；

}

/风格

脚本类型=文本/javascript

window.onload=function () {

/**

*点击按钮切换图片。

*/

//3.获取img标签

var img=document . getelementsbytagname( img )[0]；

//5.创建一个数组来保存图片的路径。

var imgArr=[img/1.jpg ， img/2.jpg ， img/3.jpg ， img/4.jpg ， img/5 . jpg ]；

//6.创建一个变量来保存当前显示图片的索引。

var指数=0；//默认显示第一个

//8.获取具有id信息的元素

var info=document . getelementbyid( info )；

//9，设置提示文本

info . innerhtml= total imgarr . length 图片，这是(索引1)图片；

//1.将click事件绑定到上一个按钮。

var prev=document . getelementbyid( prev )；

prev.onclick=function () {

//7.当索引是第一个时，需要将索引设置为最后一个。因为采用了- index，所以索引设置为5。

if (index==0) {

指数=5；

}

指数=指数-1；

//4.切换图片本质上就是修改img中的src属性。

img . src=im garr[index]；

//9，设置提示文本

info . innerhtml= total imgarr . length 图片，这是(索引1)图片；

}

//2.将click事件绑定到next按钮。

var next=document . getelementbyid( next )；

next.onclick=function () {

//7.当索引是最后一个时，需要将索引设置为第一个。由于采用了索引，所以索引设置为-1。

if (index==4) {

index=-1；

}

指数=指数1；

//4.切换图片本质上就是修改img中的src属性。

img . src=im garr[index]；

//9，设置提示文本

info . innerhtml= total imgarr . length 图片，这是(索引1)图片；

}

}

/脚本

/头

身体

div id=外部对齐=居中

p id=信息/p

Img src=img/1.jpg alt=棒冰/br/

按钮id=上一个上一个/按钮

按钮id=下一步下一步/按钮

/div

/body

/html

完成后的效果：每点击一次下一张或上一张图片，图片就会切换，顶部的提示文字也会相应变化。

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