- A+
所属分类:Web前端
一、图标切换
<style> #box{ width: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>
- 点击那两个按钮可以做到轮番显示图片
二、关闭图片案例
<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>
- 点击右上角的叉,图片会消失。
三、源码:
- 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
- 欢迎关注微信