本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
击实现图片切换效果在生活中非常的常见，恰巧今天的练习也是做一个图片的切换效果。
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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持IIS7站长之家博文。
