手動切換時加入延時，并沒有效果，能幫我看看如何寫嗎？
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
<title>Document</title>
<style>
? *{margin:0;
? ? padding:0;
? ? list-style:none;}
? .wrap{height:170px;
? ? ? ? width:490px;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? margin:10px auto;}
? .wrap ul{position:absolute;}?
? .wrap ul li{height:170px;
? ? ? ? ? ? ? cursor:pointer;}
? .wrap ol{position:absolute;
? ? ? ? ? ?right:2px;
? ? ? ? ? ?bottom:5px;}
? .wrap ol li{height:20px;?
? ? ? ? ? ? ? width: 20px;
? ? ? ? ? ? ? background:#ccc;
? ? ? ? ? ? ? border:solid 1px #666;
? ? ? ? ? ? ? box-shadow:2px 2px 2px grey;
? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? margin-left:5px;
? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? line-height:20px;
? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? cursor:pointer;}
? .wrap ol .on{background:#E97305;
? ? ? ? ? ? ? ?color:#fff;}
? </style>
? <script type="text/javascript">
? window.onload=function(){
? ? var wrap=document.getElementById('wrap');
? ? var pics=document.getElementById('pic').getElementsByTagName("li");
? ? var lists=document.getElementById('list').getElementsByTagName('li');
? ??
? ? //圖片輪播
? ? var index=0;
? ? var timer=null;
? ? timer=setInterval(function(){
? ? ? ? index++;
? ? ?if(index>=lists.length){
? ? ?index=0;
? ? ?}
? ? ?for(var j=0;j<lists.length;j++){
? ? ?lists[j].className="";
? ? ?pics[j].style.display="none";
? ? ?}
? ? ?lists[index].className="on";
? ? ?pics[index].style.display="block";
? ? },2000);
? ??
? ? //鼠標滑過、滑出事件
? ? for(var i=0;i<lists.length;i++){
? ? ?lists[i].id=i;
? ? ?lists[i].onmouseover=function(){
? ? ?clearInterval(timer); //必須清除定時器！
? ? ?//延時切換
? ? ?if(timer){
? ? ?clearTimeout(timer);
? ? ?}
? ? ?var that=this;
? ? ?timer=setTimeout(function(){
? ? ?for(var j=0;j<lists.length;j++){
? ? ?lists[j].className="";
? ? ?pics[j].style.display="none";
? ? ?}
? ? ?lists[that.id].className="on";
? ? ?pics[that.id].style.display="block";
? ? ?},500);
? ? ?index=this.id;
? ? ?
? ? ?/*
? ? ?*for(var j=0;j<lists.length;j++){
? ? ?lists[j].className="";
? ? ?pics[j].style.display="none";
? ? ?}
? ? ?lists[this.id].className="on";
? ? ?pics[this.id].style.display="block";
? ? ?index=this.id; //解決鼠標離開后跳欄的問題?。『苤匾?！
? ? ? */
? ? ?}
? ? ?pics[i].onmouseover=function(){
? ? ?clearInterval(timer);
? ? ?}
? ? ?
? ? ?lists[i].onmouseout=function(){
? ? ?timer=setInterval(function(){
? ? ? ? ? ? ?index++;
? ? ? ? ? ? ?if(index>=lists.length){
? ? ? ? ? ? ?index=0;
? ? ? ? ? ? ?}
? ? ? ? ? ? ?for(var j=0;j<lists.length;j++){
? ? ? ? ? ? ?lists[j].className="";
? ? ? ? ? ? ?pics[j].style.display="none";
? ? ? ? ? ? ?}
? ? ? ? ? ? ?lists[index].className="on";
? ? ? ? ? ? ?pics[index].style.display="block";
? ? ? ? ? ? },2000);
? ? ?}
? ? ?pics[i].onmouseout=function(){
? ? ?timer=setInterval(function(){
? ? ? ? ? ? ?index++;
? ? ? ? ? ? ?if(index>=lists.length){
? ? ? ? ? ? ?index=0;
? ? ? ? ? ? ?}
? ? ? ? ? ? ?for(var j=0;j<lists.length;j++){
? ? ? ? ? ? ?lists[j].className="";
? ? ? ? ? ? ?pics[j].style.display="none";
? ? ? ? ? ? ?}
? ? ? ? ? ? ?lists[index].className="on";
? ? ? ? ? ? ?pics[index].style.display="block";
? ? ? ? ? ? },2000);
? ? ?}
? ? }
}
? </script>
</head>
<body>
? <div id='wrap'>
? ? <ul id="pic">
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
? ? ? <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li> ? ?
? ? </ul>
? ? <ol id="list">
? ? ? <li>1</li>
? ? ? <li>2</li>
? ? ? <li>3</li>
? ? ? <li>4</li>
? ? ? <li>5</li>
? ? </ol>
? </div>
</body>
</html>
2016-08-17
?<div id='wrap'>少寫一個class='wrap'