Я хочу создать слайд-шоу изображений на моей странице, и я использовал код ниже, но он не работает.
Код HTML:
<div id="slider"></div>
Код JS:
var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg");
var image_length = image_slide.length;
var image_current = 0;
function slide () {
window.onload = function () {
document.getElementById("slider").appendChild(image_current);
};
if (image_current >= image_length){
image_current = 0;
} else {
document.slideshow.src = image_slide[image_current];
image_current++;
}
}
function auto () {
setinterval(slide, 3000);
}
Кроме того, правильно ли использовать путь к файлу в массиве, например var image_slide = new Array("image/01.jpg","image/02.jpg");
?
Я сделал несколько изменений в вашем коде. Он отлично работает. Ранее у вас нет тега изображения, а также инициализации функции
<!DOCTYPE html>
<html>
<head>
var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg");
var image_length = image_slide.length;
var image_current = -1;
function slide () {
if (image_current == image_length){
image_current = 0;
} else {
image_current++;
}
document.slideshow.src = image_slide[image_current];
}
function auto () {
setInterval(slide, 1000);
}
window.onload = function(){
slide(); // To show the 1st image
auto(); // Initialize the slider
}
</script>
</head>
<body>
<div id="slider">
<img name="slideshow" />
</div>
</body>
</html>
Я не знаю тестовый пример window.onload, но лучше разместить свой javascript после тела или использовать jquery onload, чтобы избавиться от проблем с перекрестным браузером. Кроме того, вы можете обернуть все в объект или функцию, чтобы сохранить его в чистоте и играть безопасно с другими
slide()
откуда угодно, кромеauto()
?#slider
число к ##slider
не к изображению.