如何在鼠標上暫停幻燈片

Question

我確實有一個簡單但非常有用的幻燈片演示，我想在鼠標懸停時暫停幻燈片放映，當鼠標 離開時，繼續播放幻燈片。

有什麼建議嗎？

var b = new Array(); 
b[0] = new Image(); 
b[0].src = "01_.jpg"; 
b[1] = new Image(); 
b[1].src = "02_.jpg"; 
b[2] = new Image(); 
b[2].src = "03_.jpg"; 
b[3] = new Image(); 
b[3].src = "04_.jpg"; 
b[10] = new Image(); 
b[10].src = "05_.jpg"; 

var i = 0; 
var speed = 120; // Delay in milliseconds 
function diaShow() { 
    if (i > 10) { 
     i = 0; 
    } 
    document.images.show.src = b[i].src; 
    i = i + 1; 
    window.setTimeout("diaShow()", speed); 
} 
</script> 

---

感謝，

Answer 1

你可以暫停/使用由adding event listeners上mouseenter和mouseleave事件設定爲圖像的標誌恢復幻燈片播放。

var b = new Array(); 
 
b[0] = new Image(); 
 
b[0].src = "https://www.gravatar.com/avatar/ba679c92085bb8f2b20188b1beb5539d?s=32&d=identicon&r=PG&f=1"; 
 
b[1] = new Image(); 
 
b[1].src = "https://i.stack.imgur.com/PVSOP.jpg?s=32&g=1"; 
 
b[2] = new Image(); 
 
b[2].src = "https://s-media-cache-ak0.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png"; 
 
b[3] = new Image(); 
 
b[3].src = "https://s-media-cache-ak0.pinimg.com/736x/33/b8/69/33b869f90619e81763dbf1fccc896d8d--lion-logo-modern-logo.jpg"; 
 

 
var paused = false; 
 
var i = 0; 
 
var speed = 120; // Delay in milliseconds 
 
var timeout; 
 

 
function diaShow() { 
 
    if (paused) 
 
    return; 
 

 
    if (i > 3) i = 0; 
 
    document.images.show.src = b[i].src; 
 
    i = i + 1; 
 
    timeout = window.setTimeout(diaShow, speed); 
 
} 
 
diaShow(); 
 

 
document.images.show.addEventListener("mouseenter", function() { 
 
    paused = true; 
 
    // clear existing timer if exists 
 
    if (timeout) 
 
    clearTimeout(timeout); 
 
}); 
 

 
document.images.show.addEventListener("mouseleave", function() { 
 
    paused = false; 
 
    diaShow(); 
 
});

img { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<img id="show" />