как создать слайд-шоу с изображениями в div с несколькими изображениями

0

Я хочу создать слайд-шоу изображений на моей странице, и я использовал код ниже, но он не работает.

Код 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"); ?

  • 0
    Вы вызываете slide() откуда угодно, кроме auto() ?
  • 0
    Вы #slider число к # #slider не к изображению.
Теги:

1 ответ

0

Я сделал несколько изменений в вашем коде. Он отлично работает. Ранее у вас нет тега изображения, а также инициализации функции

<!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, чтобы избавиться от проблем с перекрестным браузером. Кроме того, вы можете обернуть все в объект или функцию, чтобы сохранить его в чистоте и играть безопасно с другими

Ещё вопросы

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