<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="fk.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="fk"> <!--img[src=img/$.jpg]*6--> <img src="img/1.jpg" alt="" style="display: block;"/> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <img src="img/6.jpg" alt="" /> <ul> <li style="background: #A52A2A;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script> // 如果多途径都要控制同一块效果,那么都通过大总管变量去控制 var fk=document.getElementById('fk'); var lis=fk.getElementsByTagName('li'); var is=fk.getElementsByTagName('img'); var c=0;//大总管变量 // 定时器调用的函数 function autorun(){ c++; if(c==6){ c=0; } // 让所有图片隐藏,让所有li变灰 for(var i=0;i<6;i++){ is[i].style.display='none'; lis[i].style.background='#ddd' } // 让c号元素显示 is[c].style.display='block'; lis[c].style.background='#A52A2A'; } var timer=setInterval(autorun,1000); // 给所有li加事件 for(var i=0;i<lis.length;i++){ // 将序号存到每个li上 lis[i].xuhao=i; // 给li加鼠标移入事件 lis[i].onmouseover=function(){ clearInterval(timer); // 获得序号 var c=this.xuhao; // 让所有图片隐藏,让所有li变灰 for(var i=0;i<6;i++){ is[i].style.display='none'; lis[i].style.background='#ddd' } // 让c好元素显示 is[c].style.display='block'; lis[c].style.background='#A52A2A'; } // 给li加鼠标移出事件 lis[i].onmouseout=function(){ // 重新设置定时器 timer=setInterval(autorun,1000); } } </script> </html>
css代码
*{ margin: 0; padding: 0; } #fk{ 1200px; height: 535px; position: relative; border: 4px solid palevioletred; margin: 0 auto; } #fk img{ position: absolute; left: 0; top: 0; display: none; } #fk ul{ position: absolute; left: 528px; bottom: 23px; } #fk ul li{ 12px; height: 12px; background: #ddd; list-style: none; float: left; margin-right: 8px; border-radius: 50%; }