Основная программа слайд-шоу

Это просто базовое слайд-шоу с использованием js, но я не получаю вывод. Я хочу, чтобы он выполнял автоматическое слайд-шоу, должен ли я добавить скрипт jquery в свою программу. Пожалуйста, помогите мнеОсновная программа слайд-шоу

<script> 
var images = new Array(); 
images[0] = new Image(); 
images[0].src = "first.jpg"; 
images[1] = new Image(); 
images[1].src = "second.jpg"; 
images[2] = new Image(); 
images[2].src = "third.jpg"; 

</script> 
</head> 
<body> 
<img src="first.jpg" id="slide" width="500" height="500" /> 

<script type="text/javascript"> 


var step=0; 

function slideit(){ 

document.getElementById('slide').src = images[step].src; 
if (step<2) 
    step++; 
else 
    step=0; 

setTimeout("slideit()",2500); 
} 

slideit(); 

</body>

источник

2015-01-24 user3575357

Единственной реальной причиной добавления jquery будет то, что вы хотите анимацию. Если это не важно для вас, это должно работать нормально. Что значит, вы не получаете выход? – durbnpoisn

Изображения не меняются. – user3575357

[любая помощь вам?] (Http://stackoverflow.com/a/27690032/3436942) – jbutler483

Вы должны использовать setInterval() вместо setTimeout(), и ваш код может быть упрощен к следующему.

var images = ['http://dummyimage.com/300x100/025870/fff', 'http://dummyimage.com/300x100/456e02/fff', 'http://dummyimage.com/300x100/6e2b02/fff']; 
 
var step = 0; 
 

 
setInterval(function() { 
 
    document.getElementById('slide').src = images[step++ % images.length]; 
 
}, 2500);

<img src="http://dummyimage.com/300x100/025870/fff" id="slide" width="300" height="100" />

Обратите внимание на использование модуля (%). Для того, чтобы лучше понять его, вот что происходит:

1^st iteration: (step++ % images.length) ⇒ (0 % 3) ⇒ 0, 
2^nd iteration: (step++ % images.length) ⇒ (1 % 3) ⇒ 1, 
3^rd iteration: (step++ % images.length) ⇒ (2 % 3) ⇒ 2, 
4^th iteration: (step++ % images.length) ⇒ (3 % 3) ⇒ 0, 
5^th iteration: (step++ % images.length) ⇒ (4 % 3) ⇒ 1 and so on...

Каждый раз, когда значение step делится на количество изображений, если катится назад 0.

источник

2015-01-24 12:48:40

Я только что установил jfiddle, чтобы показать эту точную вещь. Чип правильный. – durbnpoisn

Большое спасибо, это сработало, и это замечательное объяснение. – user3575357

@ user3575357 - Добро пожаловать. :) –

Основная программа слайд-шоу

ответ

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