<!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);
????????}
}
setTimeout 失效 setTimeout和setInterval 同時存在
GatsbyJh
2016-12-11 16:17:03
