JQuery анимация изображения остановить

0

Как я могу позволить этой анимации остановиться на последнем изображении и оставить ее на последнем изображении? Может быть, вы можете помочь мне остановить эту анимацию.

var myImages = [
    "http://placekitten.com/200/200",
    "http://placekitten.com/150/150",
    "http://placekitten.com/180/180",
    "http://placekitten.com/170/170",
    "http://placekitten.com/140/150",
    "http://placekitten.com/160/160"
];
var counter = 1;  // Start at number 2 since the HTML tag has the first

function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == myImages.length) {
        counter = 0;
    }
}

$(document).ready(function() {
    setInterval(switchImage, 5000);
});
Теги:
animation

1 ответ

0
Лучший ответ

setInterval() возвращает идентификатор интервала, который вы можете передать clearInterval().

var refreshIntervalId;
var myImages = [
    "http://placekitten.com/200/200",
    "http://placekitten.com/150/150",
    "http://placekitten.com/180/180",
    "http://placekitten.com/170/170",
    "http://placekitten.com/140/150",
    "http://placekitten.com/160/160"
];
var counter = 1;  // Start at number 2 since the HTML tag has the first

function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == myImages.length) {
        counter = 0;
        clearInterval(refreshIntervalId);
    }
}

$(document).ready(function() {
   refreshIntervalId = setInterval(switchImage, 5000);
});

DEMO FIDDLE

  • 0
    Большое спасибо! но как я могу позволить анимации начать, нажав на изображение? и как я могу позволить анимации запускаться, если я захожу на страницу, потому что анимация уже начинается, когда я не на нужной странице.
  • 0
    Когда вы завернули setInterval(switchImage, 5000) в готовую DOM-анимацию, анимация начнется после загрузки вашей страницы. Поместите это в изображение клика.
Показать ещё 24 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню