在hoverrover上暫停Javascript幻燈片

好吧，所以我在這個幻燈片上工作，我似乎不能讓它暫停在鼠標懸停和恢復在鼠標。 "Image slideshow with navigation buttons"這是鏈接到完整的幻燈片代碼。任何幫助都會很棒，下面的代碼就是我試圖讓鼠標懸停在鼠標上的東西。在hoverrover上暫停Javascript幻燈片

var animate = setTimeout("swapImage()",5000); 

function pause() { 
    clearTimeout(animate); 
} 

function resume() { 
    setTimeout("swapImage()",5000); 
}

來源

2015-01-13 ike

你能後處理的鼠標懸停及移出事件的JavaScript代碼？ –

嘗試和function resume(){ animate=setTimeout("swapImage()",5000);} –

我似乎無法獲得該工作 – ike

首先在JavaScript中約定時器一些常規信息：

計時器總是生成的ID。當您撥打setTimeout或setInterval時，這些本機功能將返回timer id。在第一個聲明此計時器ID存儲在animate：

var animate=setTimeout("swapImage()",5000);

然而，當你調用clearTimeOut存儲在animate定時器被清除。當您再次撥打setTimeOut時，您需要存儲新的ID。

function resume(){ animate = setTimeout(swapImage,5000);}

但是每次想要延遲執行時都需要調用setTimeout。 setTimeout延遲執行語句n其中n是以毫秒爲單位的時間。 setInterval在n毫秒後再次重複聲明。

基於在鏈接的代碼我注意到，每一次函數swapImage套setTimeout這就是所謂的。

function swapImage(){ 
    var el = document.getElementById("mydiv"); 
    el.innerHTML=caption[i]; 
    var img= document.getElementById("slide"); 
    img.src= image[i]; 
    if(i < k) { i++;} 
    else { i = 0; } 
    animate = setTimeout("swapImage()",5000); 
    }

我已將animate添加到函數中。這應該根據鏈接中發佈的代碼來實現。除了下面的代碼。

document.getElementById("slideContainer").addEventListener("mouseover", pause, false); //attach event handlers 
document.getElementById("slideContainer").addEventListener("mouseout", resume, false); 

function pause() { 
    clearTimeout(animate); 
} 

function resume() { 
    animate = setTimeout("swapImage()",5000); 
}

這段代碼將兩個事件處理程序（mouseover和mouseout）附加到您的表中。當某人懸停在桌面上時，將觸發mouseover事件並執行pause函數。 mouseout觸發resume。你還需要更新你的html。需要將id設置到表中。

<table id="slideContainer" style="border:none;background-color:transparent;">

來源

2015-01-13 16:56:23 Mouser

使用setInterval也不能解決問題。沒有OP發佈他們的HTML，我們都在這裏拍攝到黑暗中。 –

這是改變'swapImage'函數源代碼的好處。沒有這個，我們無法追蹤超時ID。 –

非常感謝！非常感激！ – ike

var animate=setInterval(swapImage,5000); 

function pause(){ clearInterval(animate);} 
function resume(){ animate=setInterval(swapImage,5000);}

來源

2015-01-13 16:51:49 AvivC

這不是解決問題。實際上，添加的'}'打破了這個代碼。 – Mouser

你的答案與OP所嘗試的完全一樣。 –

對不起，我把它改爲setInterval – AvivC

鏈接到您發佈的幻燈片庫顯示此HTML結構：

<table style="border:none;background-color:transparent;"> 
    <tr> 
     <td> 
      <img onclick="prev()" title="Previous" alt ="Prev" height="25" width="15"src="prev.jpg"/> 
     </td> 
     <td> 
      <img name="slide" id="slide" alt ="my images" height="285" width="485" src="image-1.png"/> 
     </td> 
     <td> 
      <img onclick="next()" title="Next" alt ="Next" height="25" width="15" src="next.jpg"/> 
     </td> 
    </tr> 
    <tr> 
     <td></td> 
     <td align="center"style="font:small-caps bold 15px georgia; color:blue;"> 
      <div id ="mydiv"></div> 
     </td> 
     <td></td> 
    </tr> 
</table>

假設這HTML結構，你需要添加事件處理程序包含整個幻燈片的TABLE標籤（或一些其他標籤，其中包含整個幻燈片）：

<table onmouseover="pause()" onmouseout="resume()" style="...">

編輯：@ Mouser的回答提醒我另一個問題。你必須改變爲swapImage功能的源代碼，這樣您可以訪問超時編號：

function swapImage(){ 
    var el = document.getElementById("mydiv"); 
    el.innerHTML=caption[i]; 
    var img= document.getElementById("slide"); 
    img.src= image[i]; 
    if(i < k) { i++;} 
    else { i = 0; } 

    // Save timeout Id to implicitly declared global variable 
    animate = setTimeout("swapImage()",5000); 
}

來源

2015-01-13 17:04:14

在hoverrover上暫停Javascript幻燈片

回答

相關問題