Переключение с одного изображения на другое

Я пытаюсь выяснить, как переключиться с одного изображения на другое после 500 мс. То, что я в настоящее время держит переключением между изображениями, но я хочу, чтобы каждое изображение отображалось в течение 500 мс и чтобы второе изображение исчезло после этого 500 мс вместо того, чтобы его зацикливать. Это то, что я имею прямо сейчас:Переключение с одного изображения на другое

<html> 
<head> 
<title>loop</title> 
<script type = "text/javascript"> 

function displayNextImage() { 
x = (x === images.length - 1) ? 0 : x + 1; 
document.getElementById("img").src = images[x]; 
} 

function displayPreviousImage() { 
x = (x <= 0) ? images.length - 1 : x - 1; 
document.getElementById("img").src = images[x]; 
} 
function startTimer() { 
setInterval(displayNextImage, 500); 
} 

var images = [], x = -1; 
images[0] = "image1.jpg"; 
images[1] = "image2.jpg"; 
</script> 
</head> 
</html> 
<body onload = "startTimer()"> 
<img id="img" src="image1.jpg"> 
</body> 
</html>

Может ли кто-нибудь помочь мне исправить это? Спасибо!

источник

2014-11-25 eesther

пожалуйста перефразировать ваш вопрос. вы не спрашиваете, как переключать изображения, но спрашиваете, как делать X в промежутке. где X - «изменение фотографии» (в вашем конкретном случае) – vsync

Почему бы вам не сделать это с помощью анимации CSS? – Siyah

@ Сия - это не главное. это не о CSS или изображениях, а о его javascript не работает. – vsync

Это должно делать то, что вы хотите сделать:

<html> 
<head> 
<title>loop</title> 
<script type = "text/javascript"> 

    var images = []; 
    var x = 0; 
    var $img = document.getElementById("img"); 

    images[0] = "image1.jpg"; 
    images[1] = "image2.jpg"; 

    function displayNextImage() { 
     if (++x < images.length) { 
      $img.src = images[x]; 
      setInterval(displayNextImage, 500); 
     } 
     else { 
      $img.remove(); 
     } 
    } 

    function startTimer() { 
     setInterval(displayNextImage, 500); 
    } 


</script> 
</head> 
</html> 
<body onload = "startTimer()"> 
<img id="img" src="image1.jpg"> 
</body> 
</html>

источник

2014-11-25 15:51:03 soulprovidr

Я пробовал это, и он просто остался на первом изображении ... – eesther

@eesther: Попробуйте сейчас - у меня была логическая ошибка в моей инструкции 'if'. – soulprovidr

Использует ли это jQuery? Кажется, это работает, когда я помещаю его в разделы html и javascript и просматриваю его, но если я запустил его на сайте, это не сработает. Интересно, это потому, что сайт, на котором я запущен, использует прототип javascript framework. – eesther

Переключение с одного изображения на другое

ответ

Смежные вопросы