<!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%;
}