Создание карусели изображений с помощью setInterval

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

<img src = "images/img1.jpg" id = "images">

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data;
    if (start==1) {
      image_data = "images/img1.jpg";
    }else if (start==2) {
      image_data = "images/img2.jpg";
    }else if (start==3) {
      image_data = "images/img3.jpg";
    }else if (start==4) {
      image_data = "images/img4.jpg";
    }else if (start==5) {
      image_data = "images/img5.jpg";
    }else {
      start = 0;
    }
    document.getElementById('images').src = ""+ image_data;
    start++;
  }
</script>

Когда start достигает шести, оно сбрасывается до нуля, но image_data остается неопределенным.

showdev 22.05.2019 14:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
67
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Когда вы устанавливаете start равным 0, вы устанавливаете источник изображения как undefined для этой итерации карусели, поскольку вы не присвоили значение источнику изображения.

Вместо этого рассмотрите возможность использования модуля для выбора изображения для отображения.

// initially, start = 0
if (start % numImages === 0) {
  // display image 1
}
else if (start % numImages === 1) {
   // display image 2
}

ИЛИ: вы можете вызвать свой метод и вернуться, если установите start равным 0:

start = 1;
carousel();
return;

Но для более удобного решения вы можете сделать это:

const images = [ 'images/image1.jpg', ... ];
const currImage = images[ start % images.length ];
document.getElementById('images').src = currImage;
start++;

// This part is optional, it's unlikely a user would be on the page long enough
// for start to overflow
if (start === images.length) {
  start = 0;
}

Это будет вся ваша функция карусели.

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

Это потому, что когда start достигает 5 и вы используете 5-е изображение, вы увеличиваете его до 6 в конце функции. Затем в следующий раз вы не найдете нужного значения в своем каскаде операторов if, поэтому в конечном итоге вы устанавливаете URL-адрес img на слово «null». Поскольку все ваши изображения имеют одинаковый формат, кроме номера, вы можете избавиться от каскада if и просто установить src на 'images/img' + start + '.jpg'. Тогда все, что вам нужно сделать, это прямо перед тем, как установить его, убедиться, что он не превысил ваш самый большой индекс изображения, например:

if (start>5) {start=1;}

затем после того, как вы установите источник img, увеличьте свой счетчик.

Если ваши изображения не В самом деле будут просто проиндексированы таким образом, вы можете сохранить URL-адреса в массиве и использовать счетчик в качестве индекса в этом массиве и просто проверять, что индекс остается < array.length, пока вы увеличиваете.

Ответ принят как подходящий

Вы сбрасываете start на ноль, когда оно равно 6. В основном это можно рассматривать как мод с 6. Ваш код можно упростить до следующего

<script>
var start = 1;
var timer = setInterval(carousel, 1000);

  function carousel(){
    var image_data; 
    start =  start % 6;
    image_data = "images/img" +start+ ".jpg";
    document.getElementById('images').src = ""+ image_data;
    start++;
  }
</script>

Другие вопросы по теме