本文主要详细介绍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
完成后的效果：每点击一次下一张或上一张图片，图片就会切换，顶部的提示文字也会相应变化。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。