javascript实现点击图片切换

这篇文章主要介绍了javascript实现点击图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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);