Loop-Bilder auf schweben - setInterval Ausgabe

Question

Mein Code läuft gut ...
aber es gibt eine Sache, die ich nicht lösen kann:
wenn ich mouseover das Bild der Schleife gut gestartet, aber bei zukünftig per Mouse over es beginnt zu ändern schneller und schneller ...

var Image = new Array("//placehold.it/400x180/?text=Welcome", 
 
        "//placehold.it/400x180/?text=To", 
 
        "//placehold.it/400x180/?text=My", 
 
        "//placehold.it/400x180/?text=Web+page", 
 
        "//placehold.it/400x180/?text=INPHP"); 
 

 
var Image_Number=0; 
 
var Image_Length= Image.length; 
 

 
function change_image(num){ 
 
    Image_Number = Image_Number + num; 
 
    if(Image_Number > Image_Length) 
 
    Image_Number = 0; 
 
    if(Image_Number < Image_Length) 
 
    document.slideshow.src = Image[Image_Number]; 
 
    return false; 
 
    Image_Number = Image_Length; 
 
} 
 

 
function auto() { 
 
    setInterval("change_image(1)", 1000); 
 
}

<img src="//placehold.it/400x180/?text=Welcome" name="slideshow" onmouseover="auto()" />

Answer 1

auf jeder mouseover sind Sie ein brandneues-Intervall ™ Neuzuweisung in mehreren Funktionen resultierenden am sa laufen meine Zeit.

• name auf IMG-Tag ist ein obsolete HTML5 attribute - Siehe auch img tag @ W3.org
• "change_image(1)" ... Strings innerhalb setInterval oder setTimeout tigger eval. Was schlecht ist. Die wirklichen Funktionsnamen sollten stattdessen verwendet werden: setInterval(functionName, ms)
• Sie sind nicht gut das Argument der Verwaltung num
• Sie nicht Code nach einer return Anweisung
• Verwenden Sie das mouseenter Ereignis (statt mouseover)
haben
• und viele mehr Fehler ....

Hier ist ein Remake:

var images = [ 
 
    "//placehold.it/400x180/?text=Welcome", 
 
    "//placehold.it/400x180/?text=To", 
 
    "//placehold.it/400x180/?text=My", 
 
    "//placehold.it/400x180/?text=Web+page", 
 
    "//placehold.it/400x180/?text=INPHP" 
 
]; 
 
var c = 0; // c as Counter ya? 
 
var tot = images.length; 
 
var angryCat = false; 
 

 
// Preload! Make sure all images are in tha house 
 
for(var i=0; i<tot; i++) { 
 
    var im = new Image(); 
 
    im.src= images[i]; 
 
} 
 

 
function changeImage() { 
 
    document.slideshow.src = images[++c%tot]; 
 
} 
 

 
function auto() { 
 
    if(angryCat) return; // No more mouse enter 
 
    angryCat = true; 
 
    setInterval(changeImage, 1000); 
 
}

<img src="//placehold.it/400x180/?text=Welcome" name="slideshow" onmouseenter="auto()" />

Der Zuwachs und Schleife erreicht man mit ++c % tot
Die angryCat boolean Flag hilft es zu wissen, die auto() bereits begonnen (Maus war!), In diesem Fall wird es return; (Ausfahrt) Die Funktion verhindert die Erzeugung zusätzlicher Überlappungsintervalle beim nachfolgenden mouseenter (was Ihr Hauptproblem war).

---

Zusätzlich würde ich Ihre JS vorschlagen weg von HTML zu halten, so dass anstelle des JS Attribut Ereignis

onmouseenter="auto()" 

eine ID zu Ihrem Bild id="myimage" und verwenden JS zuordnen:

document.getElementById("myimage").addEventListener("mouseenter", auto, false);