javascript实现点击图片切换_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

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

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://m.jb51.net/article/208879.htm

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章

javascript实现点击图片切换

JavaScript代码实现简单日历效果

详解css样式中的border-image

文本超出部分隐藏的两种方法