Member 12724972 Ответов: 1

Как сделать так, чтобы изображение менялось каждые 3 секунды в HTML

Привет,

У меня есть 3 фотографии, и я хочу, чтобы они менялись каждые 3 секунды.

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

Может ли кто-нибудь помочь мне с другим решением?

Я не программист, поэтому, пожалуйста, объясните все просто. спасибо

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

HTML

< script type= "text/javascript">
ВАР picPaths = ['iphone1.формат PNG','iphone2.формат PNG','кодовые имена-iphone3.в формате PNG'];
var curPic = -1;
// предварительная загрузка изображений для плавной анимации
var imgO = новый массив();
для (i=0; i < picPaths.длина; i++) {
imgO[i] = новое изображение();
imgO[i]. src = picPaths[i];
}

функция swapImage() {
curPic = (++curPic > picPaths.длина-1)? 0: курпик;
imgCont. src = imgO[curPic]. src;
setTimeout(swapImage, 2000);
}

window. onload=функция() {
imgCont = document. getElementById ('imgBanner');
swapImage();
}

< / script>

тело


< img id= "imgBanner" src=" "alt= ""width=" 350 "height=" 456 " />




CSS

#imgBanner {
положение: абсолютное;
справа: 80px;
топ:836px;
z-индекс:9999;
заполнение: 0;
}

1 Ответов

Рейтинг:
1

Anurag Sharma

Для этого вы можете использовать встроенный в javascript метод setInterval.

Вот быстрое решение, которое я могу придумать,

Дайте мне знать, если у вас возникнут вопросы.

// Initialize images in an array
var picPaths = ['iphone1.png','iphone2.png','iphone3.png'];
// An index to track the contender image 
var imageIndex = 0;
var bannerImage; 

// An event callback for starting the interval
function startInterval() {
 setInterval(displayNextImage, 3000);
}

function displayNextImage() {
  bannerImage.src = picPaths[imageIndex];
  if(imageIndex === (picPaths.length-1)) {
    imageIndex = 0;
  }
  else {
    imageIndex = imageIndex + 1; // It can be replaced with imageIndex ++  
  }
}

window.onload=function() {
 bannerImage = document.getElementById('imgBanner');
 startInterval();
}

Karthik_Mahalingam

5