<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>music3.0</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>
<div></div>
<div></div>
</div>
<div class="content center">
<div>
<div id="title">
<ul>
<li><a href="#">第1</a></li>
<li><a href="#">第2</a></li>
<li><a href="#">第3</a></li>
<li><a href="#">第4</a></li>
<li><a href="#">第5</a></li>
</ul>
</div>
<div id="cont">
<div>
<img src="img/1 (1).webp" alt="">
</div>
<div>
<img src="img/1 (2).webp" alt="">
</div>
<div>
<img src="img/1 (3).webp" alt="">
</div>
<div>
<img src="img/1 (4).webp" alt="">
</div>
<div>
<img src="img/1 (5).webp" alt="">
</div>
</div>
</div>
</div>
<div></div>
<script src="js/script.js"></script>
</body>
</html>
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var timer=null;
var timer2=null;
var index=0;
//获取鼠标滑过或点击的标签和要切换内容的元素
var lis=$('title').getElementsByTagName('li'),
divs=$('cont').getElementsByTagName('div');
if(lis.length!=divs.length)
return;
//遍历title下的所有li
for(i=0;i<lis.length;i++){
lis[i].id=i;
lis[i].onmouseover=function(){
clearInterval(timer2);
//用that来引用当前的li
var that=this;
//如果存在定时器，就清除定时器
if(timer){
clearTimeout(timer);
timer=null;
}
timer=setTimeout(changeOption(that.id),500)
}
lis[i].onmouseout=function(){
timer2=setInterval(autoPlay,2000);
}
}
//定时器，定时改变
if(timer2){
clearInterval(timer2);
timer2=null;
}
timer2=setInterval(autoPlay,2000);
//封装
function changeOption(x){
//清除所有li上的active
for(j=0;j<lis.length;j++){
lis[j].className='';
divs[j].style.display='none';
}
//设置当前高亮显示
lis[x].className='active';
divs[x].style.display='block';
index=x;
}
function autoPlay(){
index++;
if(index>=lis.length){
index=0;}
changeOption(index);
}
}
添加回答
举报
0/150
提交
取消