一、图标切换
<style>
#box{
1200px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box">
<img src="img/img_01.png" alt="" id="icon">
<p></p>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
<script>
window.onload=function (ev) {
//1.获取标签
var icon = document.getElementById("icon");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//2.点击
var currentIdex = 1;//当前的图片索引
var minIndex = 1,maxIndex=5;
//点击操作触发图片轮番图
prev.onclick=function (ev1) {
if(currentIdex==minIndex){
currentIdex=maxIndex+1;
}
currentIdex--;
icon.setAttribute("src","img/img_0"+currentIdex+".png");
};
next.onclick=function (ev2) {
if(currentIdex==maxIndex){
currentIdex=minIndex-1;
}
currentIdex++;
icon.setAttribute("src","img/img_0"+currentIdex+".png");
};
}
</script>
</body>
![31.1](https://img-blog.csdnimg.cn/20200903235202560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70#pic_center)
二、关闭图片案例
<style>
div{
position:relative;/*子绝父相*/
display:inline-block;/*很关键如果没有图片就不能重叠上去了*/
}
.close{
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
</style>
</head>
<body>
<div>
<img src="img/img_02.png" alt="">
<img class="close" src="img/close.png" alt="">
</div>
<script>
window.onload = function (ev) {
//1.获取关闭标签
var close = document.getElementsByClassName("close");
console.log(close);
//另一种方式:var close = document.querySelector("#close");
//2.监听点击
close.onclick = function () {
this.parentNode.remove();//去掉图片
//或者如下:设置父元素的style样式
this.parentNode.style.display="none";
}
}
</script>
![31.2](https://img-blog.csdnimg.cn/20200904001840332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70#pic_center)
三、源码:
- D31_iconSwitch.html
- D31_2_CloseImage.html
- 地址:
https://github.com/ruigege66/JavaScript/blob/master/D31_iconSwitch.html
https://github.com/ruigege66/JavaScript/blob/master/D31_2_CloseImage.html
- 博客园:
https://www.cnblogs.com/ruigege0000/
- CSDN:
https://blog.csdn.net/weixin_44630050?t=1
- 欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流
![911](https://img-blog.csdnimg.cn/20200809233047145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYzMDA1MA==,size_16,color_FFFFFF,t_70)