日期:2014-05-16  浏览次数:20476 次

window.setInterval() 频率会变快。请前辈们帮忙看看。
 <script type="text/javascript">
//图片自动展示
var imageAuto ;
var displayNum = 0,oldDisplay = 0;
function autoRun(){
var imgs = document.getElementsByName("displayImage");
var area = document.getElementById("displayArea");

imgs[oldDisplay].border = "0px";
imgs[displayNum].border = "4px";
area.src = imgs[displayNum].src;
oldDisplay = displayNum;
displayNum = (displayNum + 1) % imgs.length;



}
function autoBrowse(){

imageAuto = window.setInterval("autoRun()", 1500);
}

function imageOver(num){
stopThread();
displayNum = num;
autoRun();
}
function imageOut(num){
autoBrowse();
}

function autoDisplay(auto){
if(auto){
window.setTimeout("autoBrowse()", 100);
}else{
stopThread();
}
}

function stopThread(){
window.clearInterval(imageAuto);
}

    </script>

 <body onload = "autoBrowse();" onunload = "stopThread()">
 <img src = "image/0.png" id = "displayArea" alt = "图片1" height = "400" width = "800" onmouseover = "autoDisplay(false)"  onmouseout = "autoDisplay(true)"/>
    <br/>
    <table>
     <tr>
     <td> <img name = "displayImage" src = "image/0.png" alt = "图片1" height = "120" width = "160" onmouseover = "imageOver(0)"  onmouseout = "imageOut(0)" /> </td>
     <td> <img name = "displayImage"  src = "image/1.png" alt = "图片2" height = "120" width = "160" onmouseover = "imageOver(1)"  onmouseout = "imageOut(1)" /> </td>
     <td> <img name = "displayImage"  src = "image/2.png" alt = "图片3" height = "120" width = "160" onmouseover = "imageOver(2)"  onmouseout = "imageOut(2)" /> </td>
     <td> <img name = "displayImage"  src = "image/3.png" alt = "图片4" height = "120" width = "160" onmouseover = "imageOver(3)"  onmouseout = "imageOut(3)" /> </td>
     <td> <img name = "displayImage"  src = "image/4.png" alt = "图片5" height = "120" width = "160" onmouseover = "imageOver(4)"  onmouseout = "imageOut(4)" /> </td>
     <td> <img name = "displayImage"  src = "image/5.png" alt = "图片6" height = "120" width = "160" onmouseover = "imageOver(5)"  onmouseout = "imageOut(5)" /> </td>
     </tr>
    </table>
</body>