Как создать карусель изображений с помощью HTML5, CSS и Javascript? ⇐ CSS

[Anonymous]

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

Я думаю, проблема в Javascript код, потому что все, что должна была сделать часть HTML и CSS этого проекта, уже сделано. Однако изображение не меняется.

Я немного новичок в Javascript, поэтому, пожалуйста, указывайте на что-нибудь, даже если это очевидно. Заранее спасибо!!

Это мой код:

Сначала Javascript, затем CSS и затем HTML:< /p>

Код: Выделить всё

var slideInterval = 3500;

function getFigures() {
return document.getElementById("carousel").getElementsByTagName("figure");
}

function nextImage() {
var pointer;
//var figures = getFigures;
var figures = getFigures();
for(var i = 0; i < figures.length; i++){
if(figures[i].className == "visible")
figures[i].className = "";
pointer = i;
}

if (++pointer == figures.length) {
pointer = 0;
}

figures[pointer].className = 'visible';
setTimeout(nextImage(), slideInterval);
}

function startPlayback() {
setTimeout(nextImage(), slideInterval);
}

startPlayback();

Код: Выделить всё

section#carousel > figure > img {
display: none;
margin: 0px auto;
}

section#carousel > figure.visible > img {
display: block;
position: relative;
overflow: hidden;
}

section#carousel > figure > figcaption {
display: none;
}

section#carousel > figure.visible > figcaption {
display: block;
text-align: center;
font-weight: bold;
font-size: 1.5em;
}

Код: Выделить всё

Contoso News





[img]../media/efficient_cars.png[/img]
Efficient Cars To Be Used In The Future


[img]../media/natural_disasters.png[/img]
Many Natural Disasters Are Thought To Happen More Often


[img]../media/health_records.png[/img]
Many Doctors are Moving to Digital Health Records This Year

Подробнее здесь: https://stackoverflow.com/questions/453 ... javascript