1.轮播图
可实现:
自动轮播(加载完成后调用定时器)、鼠标移入停止(停止定时器)、鼠标移出开始(开始定时器),点击切换(点击事件)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 window.onload = function(){ 2 /*轮播图*/ 3 //自动加载 4 s = setInterval(down,2000); 5 } 6 /*控制轮播图的定时器*/ 7 //定义一个变量作为数组下标 8 var lbnum = 0; 9 function down(yyNum){ 10 //定义一个图片路径数组 11 var lbimgArr = ['../resoures/images/shouye/24401108web1.png','../resoures/images/shouye/2440_1.png','../resoures/images/shouye/412pcshoujiao244011081.png']; 12 //找到图片所在的div 13 var bann = document.getElementById('banner'); 14 //找到小圆圈存为数组 15 var yArr = document.getElementsByClassName('xyy'); 16 //自动给小圆圈设置样式 17 for(var i = 0;i < yArr.length; i++){ 18 yArr[i].style.backgroundPosition = '0px 0px'; 19 } 20 if(yyNum == 0 || yyNum == 1 || yyNum == 2){ 21 lbStop(); 22 yArr[yyNum].style.backgroundPosition = '0px -18px'; 23 bann.setAttribute('src',lbimgArr[yyNum]); 24 }else{ 25 yArr[lbnum].style.backgroundPosition = '0px -18px'; 26 bann.setAttribute('src',lbimgArr[lbnum]); 27 lbnum++; 28 if(lbnum == lbimgArr.length){ 29 lbnum = 0; 30 } 31 } 32 } 33 //开始定时器 34 function lbStart(){ 35 s = setInterval(down,2000); 36 } 37 //停止定时器 38 function lbStop(){ 39 clearInterval(s); 40 }
2.事件流
多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流”。
比如:给一个大的div加鼠标移出事件,只要鼠标放在子级元素上就会被判定为移出。
以下两个都可以添加事件,但是如果与事件流有关,要用Add..
obj.setAttribute('onClick','show()'); //不能取消事件流
obj.addEventListener('click',show()); //可以取消事件流
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 function appOut(overNum){ //根据情况,可给事件传参 2 function isMouseLeaveOrEnter(e, handler) { 3 var reltg=e.relatedTarget?e.relatedTarget:e.type=='mouseout'?e.toElement:e.fromElement; 4 while (reltg && reltg != handler){ 5 reltg = reltg.parentNode; 6 } 7 return (reltg != handler); 8 } 9 //找到默认显示的div 10 var div1 = document.getElementsByClassName('onMover')[overNum]; 11 //找到默认隐藏的div 12 var div2 = document.getElementsByClassName('divb_t')[overNum]; 13 div2.οnmοuseοut=function(ev){ 14 var ev=ev||window.event; 15 if(!isMouseLeaveOrEnter(ev,div2)){ 16 return false; 17 } 18 div2.style.height = '310px'; 19 div2.style.display = 'none'; 20 div1.style.opacity = '1'; 21 } 22 }