изображения Петля на парении - setInterval вопрос

Question

Мой код работает хорошо ...
но есть одна вещь, которую я не могу решить:
, когда я mouseover изображение цикл начинается хорошо, но на последующих наведений мыши он начинает меняться быстрее и быстрее ...

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

на каждом mouseover вы переназначение совершенно новый интервал ™ в результате многочисленных функций, работающих на са мне время.

• name на IMG тег является obsolete HTML5 attribute - Смотрите также img tag @ W3.org
• "change_image(1)" ... строки внутри setInterval или setTimeout Тигра eval. Что плохо. Реальное имени функции следует использовать вместо: setInterval(functionName, ms)
• Вы не управляете хорошо аргументом num
• Вы не можете иметь код после return заявления
• Используйте mouseenter событие (вместо mouseover)
• и многие другие ошибки ....

Вот римейк:

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

Приращение и петли достигается с помощью ++c % tot
angryCat логический флаг помогает узнать НЕГО auto() уже начал (мышь была там!), В этом случае он будет return; (выход) функция, предотвращающая создание дополнительных перекрывающихся интервалов в последующем центре мыши (что было вашей основной проблемой).

---

Кроме того, я хотел бы предложить, чтобы сохранить ваши JS от HTML, поэтому вместо атрибута события JS

onmouseenter="auto()" 

присвоить идентификатор к изображению id="myimage" и использовать JS:

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