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 (index0) {
     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);
    

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

• 最简单的js图片切换效果实现代码
• 用html+css+js实现的一个简单的图片切换特效
• 纯js实现背景图片切换效果代码
• 简单的实现点击箭头图片切换的js代码
• css图片切换效果代码[不用js]
• 纯js无flash仿搜狐女人频道FLASH图片切换效果代码
• javascript实现图片切换的幻灯片效果源代码
• JavaScript实现图片切换效果
• js鼠标点击图片切换效果代码分享
• JS实现图片切换效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！