相册图片切换

来源：互联网发布：淘宝法院拍卖的房子编辑：程序博客网时间：2024/06/05 07:42

事件委托是通过事件冒泡的原理，利用父级去触发子级的事件。如下html，如果不用事件委托，将每一个li都去添加click事件监听，非常麻烦。另外就是如果通过js动态创建的子节点，需要重新绑定事件。而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件。

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>相册图片切换</title><styletype="text/css">*{margin:0;padding: 0;} .container{margin:20px auto; width:600px;} .container ul li{list-style:none; width:192px;height:200px;border:3px solid transparent;float: left;overflow: hidden;}.container ul li:hover{border:3px solid #1db791;} .container ul li:hover img{border:3px solid #1db791;transform:scale(1.2);} .container ul li img{width: 100%;height: 100%;transition: transform 3s;} .box{width: 100%;height: 100%;background:rgba(0,0,0,0.5);position: fixed;top:0;left: 0;display: none;}.pic{width:400px;height: 400px;padding:20px; background-color: #fff; position: fixed;overflow: hidden;left:50%;margin-left:-200px; top:50%;margin-top:-200px; display: none;}/*top:calc(50%-100);left:calc(50%-96);*/.pic img{width: 100%;height: 100%;} .arrow{width: 30px;height: 60px;background-color:#8d8a8a; display: block;position: absolute;top:50%;margin-top:-30px; z-index:11111111;line-height: 60px;text-align: center;font-size: 30px; color:#efefef;}a.arrow{text-decoration: none;} .arr-left{left:0px;}.arr-right{right:0px;}</style></head><body><divclass="container"id="container"><ulid="ul1"><li><imgsrc="quickOnline/img/1.jpg"alt=""></li><li><imgsrc="quickOnline/img/2.jpg"alt=""></li><li><imgsrc="quickOnline/img/3.jpg"alt=""></li><li><imgsrc="quickOnline/img/4.jpg"alt=""></li></ul></div> <divclass="box"id='box'></div><divclass="pic"id="pic"><imgsrc=""alt=""><ahref="#"class="arrow arr-left"id="left"><</a><ahref="#"class="arrow arr-right"id="right">></a></div><scripttype="text/javascript">var lis=document.getElementsByTagName('li'); // var box=document.getElementsByClassName('box')[0]; var box=$('box'); // var pic=document.getElementsByClassName('pic')[0]; var pic=$('pic'); var index=0; //这里使用了事件委托 window.onload = function(){ 　　var oUl = document.getElementById("ul1"); 　　oUl.onclick = function(ev){ 　　　　var ev = ev || window.event; 　　　　var target = ev.target || ev.srcElement; while(target !== oUl ){ if(target.tagName.toLowerCase() == 'li'){ console.log('li click~'); break; } target = target.parentNode; } var node = target.parentNode.children; 　　　　if(target.nodeName.toLowerCase() == 'li'){**var nodeArr = Array.from(node);**//类数组转换成数组 index = nodeArr.indexOf(target); 　　　　　console.log(index); box.style.display='block'; pic.style.display='block';getSrc();　　　　} 　　} } box.onclick=function(){ box.style.display='none'; pic.style.display='none'; } function $(id){return document.getElementById(id);}$('right').onclick=function(){index++;if (index>lis.length-1) { index=0; //alert('已经是最后一张了！') //return; } console.log(lis.length); //可优化两种方法取一// index%=lis.length;getSrc();}$('left').onclick=function(){index--; if (index<0) { index=lis.length-1;; //alert('已经是第一张了！') }//可优化 //if(index<0)index=0; getSrc(); }function getSrc(){var img=lis[index].children[0].src;pic.children[0].src=img;}</script> </body></html>

阅读全文

0 0