Member 14867940 Ответов: 1

Как я могу получить мои карусели изображений, для работы (на JavaScript)

У меня есть 5 изображений, которые я должен был появляться каждые несколько секунд. Я написал эту функцию ниже, но на моем сайте ничего не отображается.

<pre>function imageSlides(){
  let imageArray = ["/imgs/cn1.jpg", "/imgs/cn2.jpg", "/imgs/cn3.jpg", "/imgs/cn4.jpg", "/imgs/cn5.jpg"];

  imageArray.forEach(item => setTimeout(()=> {
    document.getElementById("slide").src = "item";
    
 }, 2000));
 
}


Что я уже пробовал:

Я пробовал использовать setInterval и вызывать свою функцию. Я новичок в программировании так что сейчас я потерялся

1 Ответов

Рейтинг:
1

Keith Barrow

Если у вас нет абсолютной необходимости писать свой собственный (из-за нечетных требований к дисплею или вы делаете это как упражнение), вы сэкономите много усилий, просто получив открытый исходный код из интернета. Bootstrap имеет один встроенный, есть довольно хороший, который называется "Slick".

Тем не менее, из вашего кода вы устанавливаете ФОК к литеральной строке "пункт" вместо исходного пути, содержащегося в переменной пункт, линия должна выглядеть более похожей:

document.getElementById("slide").src = item;


Логика также имеет проблему: после вызова функции она установит источник для каждого изображения в быстрой последовательности, так что вы в значительной степени просто увидите конечное изображение. Он также будет циклически работать только один раз.

То, что вам нужно, больше похоже на:

function imageSlides(){
  let imageArray = ["/imgs/cn1.jpg", "/imgs/cn2.jpg", "/imgs/cn3.jpg", "/imgs/cn4.jpg", "/imgs/cn5.jpg"];

    var i = 0;
    document.getElementById('silde').src = imageArray[i]; // Inititalise
    setInterval(() =>{
        i += 1;
        if(i === imageArray.length - 1) {
            i = 0; // Show the image at the end of list.
        }
        document.getElementById('silde').src = imageArray[i];
    }, 2000);
   
 }, 2000));
 
}


Есть некоторые вещи, которые вы можете сделать, чтобы помочь привести в порядок вышесказанное, но, надеюсь, это достаточно ясно, кроме того, я еще не тестировал его, так что могут быть ошибки один за другим.