本文介绍如何使用JavaScript实现简单的图片切换功能。通过获取按钮和img元素，利用数组存储图片路径，并根据当前索引动态修改src属性。代码包含HTML结构、CSS样式及JS逻辑，支持上一张和下一张按钮点击事件，实时显示图片总数与当前序号。
JavaScript图片切换功能实现
本文分享了一段利用JavaScript实现图片切换功能的完整代码示例，供读者参考学习。
最终运行效果如图所示：
功能逻辑分析
实现思路如下：首先为切换按钮绑定单击事件，随后在事件处理函数中构造逻辑。核心原理是通过修改<img>标签的src属性来更换显示图片。具体做法是将所有图片的路径存储在一个数组中，通过维护一个索引变量，利用该索引从数组中读取对应的图片地址并赋值给img元素。
以下是实现该功能的相关代码：
代码实现细节
CSS样式部分代码如下：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#a{
margin: 50px auto;
width: 500px;
padding: 15px;
text-align: center;
background-color: #99FF99;
}
</style>JavaScript逻辑代码如下：
<script>
window.onload=function(){
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var img = document.getElementsByTagName("img")[0];
//构建一个数组存图片
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
var index = 0;
//console.log(src);
var p = document.getElementById("b");
btn1.onclick = function(){
//alert("1");
//img.src="img/2.jpg"
index--;
if (index<0){
index = imgArr.length-1
}
img.src=imgArr[index]
p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
};
btn2.onclick = function(){
//alert("2");
index++;
if (index>4){
index = 0;
}
img.src=imgArr[index]
p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
};
};
</script>HTML结构部分代码如下：
<body>
<div id="a">
<img src="img/1.jpg" alt="雪糕" />
<button id="btn1">上一张</button>
<button id="btn2">下一张</button>
<p id="b">共5张图片，当前第1张</p>
</div>
</body>以上就是本文的全部内容，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站。