点击实现图片切换效果在生活中非常的常见，恰巧今天的练习也是做一个图片的切换效果。供大家参考：
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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Lzy_o/article/details/115408535
dy("nrwz");
查看更多关于javascript实现点击图片切换的详细内容...