如何快速製作一個簡單的圖片輪播？
效果圖：
思路分析：
1、開啟一個定時器
方法名：window.setInterval(code,MilliSec)，每隔指定的時間就執行code，無限次執行。
2、定時器函式主要是用來執行圖片輪播的效果
3、當滑鼠放在圖片上面時，圖片就停止了輪播的效果 清除了定時器
方法名：window.clearInterval (timer），清除指定的定時器。
4、當滑鼠離開圖片上面時，圖片繼續在執行輪播的效果 重新開啟了定時器功能
5、當滑鼠放在li標籤上面時，圖片就停止了輪播的效果 清除了定時器
6、當滑鼠放在li標籤上面時，還會顯示li標籤上面對應的數字的圖片
7、當滑鼠離開li標籤上面時，圖片就會繼續開始輪播的效果 重新開啟了定時器功能
8、li標籤上面的高亮效果，它是隨著圖片滾動而滾動。
HTML程式碼如下：
<body>
<div id="content">
<!--輪換顯示的橫幅廣告圖片-->
<div class="scroll_top"></div>
<div class="scroll_mid">
<img src="images/dd_scroll_1.jpg" alt="輪換顯示的圖片廣告" id="dd_scroll" onmouseover="stopScroll()" onmouseout="goon()"/>
<div id="scroll_number">
<ul>
<li class="scroll_number_over" onmouseover="stopScroll(1)" onmouseout="goon()">1</li>
<li onmouseover="stopScroll(2)" onmouseout="goon()">2</li>
<li onmouseover="stopScroll(3)" onmouseout="goon()">3</li>
<li onmouseover="stopScroll(4)" onmouseout="goon()">4</li>
<li onmouseover="stopScroll(5)" onmouseout="goon()">5</li>
<li onmouseover="stopScroll(6)" onmouseout="goon()">6</li>
</ul>
</div>
</div>
<div class="scroll_end"></div>
</div>
</body>
JS程式碼如下：
<script type="text/javascript">
window.onload=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById('scroll_number');
scrLi=scroll_number.getElementsByTagName('li');
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i<scrLiLen;i++){
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById('dd_scroll');
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval('imgScroll()',500);
}
</script>