本文实例为大家分享了使用JS实现简单的图片切换的具体代码，供大家参考，具体内容如下
效果如图：
分析： 首先为按钮添加单击响应事件，然后构造函数。
其实切换图片就是切换img标签src的属性，可以获取标签属性然后进行修改即可。
可以把属性值存放在一个数组中，通过数组的索引来获取。
附上相关代码：
css部分代码：
<style type="text/css">
? *{
?? ?margin: 0;
?? ?padding: 0;
?? ??? ?}
?? ??? ?#a{
?? ??? ?margin: 50px auto;
?? ??? ?width: 500px;
?? ??? ?padding: 15px;
?? ??? ?text-align: center;
?? ??? ?background-color: #99FF99;
?? ??? ??? ??? ?
?? ?}
</style>
js代码：
<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>
body部分：
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did124054