Циклические изображения при наведении - setInterval

-8

Мой код работает хорошо...
но есть одна вещь, которую я не могу решить:
когда я 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()" />

спросил(а) 2021-01-27T16:39:39+03:00 4 месяца, 4 недели назад
1
Решение
107

На каждой mouseover вы переназначаете brand-new-interval ™, в результате чего одновременно выполняются несколько функций.

    name в теге IMG - устаревший атрибут HTML5. См. также img tag @W3.org "change_image(1)"... строки внутри setInterval или setTimeout tigger 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 boolean помогает узнать, что auto() уже запущен (мышь была!), В этом случае он return; (выход), предотвращающий создание дополнительных перекрывающихся интервалов в последующем центре мыши (что было вашей основной проблемой).

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

onmouseenter="auto()"

присвойте ID вашему изображению id="myimage" и используйте JS:

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

ответил(а) 2021-01-27T16:39:39+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема