Javascript image slider setInterval()

Question

Я делаю простой слайдер изображения, который проходит через каталог, содержащий изображения. Изображения называются «img_1», «img_2» и «img_3», поэтому нужно просто перебирать их. Я не понимаю, как реализовать интервал. Я хочу, чтобы изображения отображались в течение 3 секунд, а затем изменились. Функция imgSlider - нагрузка на тело.

Редактировать: Я ищу простые решения (в чистом JS), поскольку в настоящее время я изучаю JS. Извините, что не уточнил это в вопросе. Здесь есть много хороших ответов!

function changeImg(img, i){ 
img.setAttribute("src", "img/slider/img_" + i + ".jpg"); 
} 

function imgSlider(){ 
var img = document.createElement("img"); 
var targetDiv = document.getElementById("slider"); 

img.setAttribute("width", "100%"); 
img.setAttribute("height", "70%"); 

targetDiv.appendChild(img); 

for(i=1; i<4; i++){ 
    setInterval(changeImg(img, i), 3000); 
    } 
} 

Answer 1

Что вам нужно сделать, это просто, вы должны изменить setInterval код вроде этого:

$(function() { 
 
    var curImg = 1; 
 
    setInterval(function() { 
 
    $("img").attr("src", "//placehold.it/100?text=" + ++curImg); 
 
    }, 2000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="//placehold.it/100?text=1" />

Вот, Я дал интервал 2 секунды для проверки , Я использовал jQuery только для обновления изображения. Если вы хотите это в простом JavaScript, это возможно через ваш код.

Pure JS Версия

var curImg = 1; 
 
setInterval(function() { 
 
    document.getElementsByTagName("img")[0].src = "//placehold.it/100?text=" + ++curImg; 
 
}, 2000);

<img src="//placehold.it/100?text=1" />

Answer 2

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

Повторите это каждые 3 секунды.

var count = 0; 
setInterval(function() { 
    showImage(count); 
    count = (count+1)%total_no_of_images 
}, 3000) 

Answer 3

setInterval принимает функцию, вы должны передать ему ссылку на функцию, она будет работать на соответствующем интервале.

Также обратите внимание на то, что принятый ответ предполагает наличие бесконечных изображений и имеет интервал «бесконечного цикла», которого следует избегать, если это вообще возможно. Здесь я останавливаю часы после пятого изображения.

const changeImg = (img, i) => { 
    img.setAttribute('src', `img/slider/img_${i}.jpg`); 
}; 

const imgSlider =() => { 
    const img = document.createElement('img'); 
    const targetDiv = document.getElementById('slider'); 

    img.setAttribute('width', '100%'); 
    img.setAttribute('height', '70%'); 

    targetDiv.appendChild(img); 

    let i = 0; 

    const interval = setInterval(
     () => { 
      changeImg(img, i); 
      i += 1; 
      if (i > 4) { 
       clearInterval(interval); 
      } 
     }, 
     3000 
    ); 
};