点击实现图片切换效果在生活中非常的常见，恰巧今天的练习也是做一个图片的切换效果。供大家参考：

HTML代码如下：

<div class="img"> <img src="images/1.jpg" id="myImg" class="myImg" alt="这里是1.jpg"> <p> <input type="button" id="pre" class="btn" value="上一张"> <input type="button" id="next" class="btn" value="下一张"> </p> </div>

CSS代码如下：

*{ margin: 0; padding: 0;}img{ boder:none;}button{ outline: none; vertical-align: middle;}.img{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px; text-align: center;}.myImg{ width: 500px; height: 300px;}p{ text-align: center;}p .btn{ width: 100px; height: 30px; background: #306bbf; color: #fff; margin-top: 20px; margin-bottom: 20px;}

javascript 部分：

//找标签let myImg = document.getElementById("myImg");let pre=document.getElementById("pre");let next=document.getElementById("next");//创建一个保存图片的数组let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];//数组的索引下标let index=0;//定义事件函数function preImg(event){ index--; //实现循环切换 if (index<0) { index=arrImg.length-1; } myImg.src = arrImg[index];}function nextImg(event){ index++; //实现循环切换 if (index>arrImg.length-1) { index=0; } myImg.src = arrImg[index];}pre.addEventListener('click',preImg);next.addEventListener('click',nextImg);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。