Wie Diashow pausieren auf der Maus über

Question

habe ich eine einfache, aber sehr nützlich (zumindest für meine Zwecke) Slideshow, die ich auf der Maus auf ‚Pause‘ wollen immer und ‚continue‘ wie die Maus das Bild verlässt.

Irgendwelche Vorschläge?

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> 

---

Danke,

Answer 1

Sie können die Diashow mit einem Flag halten/fortzusetzen, die auf mouseenter und mouseleave Ereignisse von adding event listeners auf das Bild gesetzt.

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" />