Я пытаюсь отобразить 4 изображения в автоматическом слайд-шоу, построив его в чистом JavaScript. Функции setInterval () и setTimeout () меня действительно смущают.

Код отображает первый рис, а затем ждет 3 секунды и отображает последний рис, а затем заканчивается ..... не знаю почему ??

var divImages = document.getElementById("images");
var img1 = document.getElementById("img1"); //display:none using CSS
var img2 = document.getElementById("img2"); //display:none using CSS
var img3 = document.getElementById("img3"); //display:none using CSS
var img4 = document.getElementById("img4"); //display:none using CSS

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
}
setTimeout(getSecondImage,3000);

function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
}
setTimeout(getThirdImage,3000);

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";
}
setTimeout(getFourthImage,3000);
0
nishkaush 10 Янв 2017 в 08:17

3 ответа

Лучший ответ

Это очень легко, но прежде чем я объясню, попробуйте это

setTimeout("alert('a')",3000)
setTimeout("alert('b')",3000)

Вы видите? Оба запускаются ровно через 3 секунды, почему? Вы спрашиваете, потому что

setTimeouts асинхронный

То есть . они не будут ждать друг друга . Когда интерпретатор javascript видит первый setTimeout, он записывает, что в своем «материале, который нужно делать через 3 секунды», теперь после записи он читает второй setTimeout, и это также записывается в том же списке, но на самом деле стоит отметить, что между последними двумя событиями прошло почти нулевое время, кроме того, из-за невероятной скорости движка js, даже если вы поместите огромный код (даже k строк кода) между двумя setTimeouts, они все еще будет запускаться через 3 секунды в порядке их появления. Вот почему все 4 функции слайда выполнялись через 3 секунды в порядке их setTimeouts, поскольку getFourthImage() был последним из них, оставался только его эффект

Так как ты их каскадишь? Просто поместите settimeout слайда в функцию предыдущих слайдов, вроде будильника или какой-то эстафеты.

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
  setTimeout(getSecondImage,3000);
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
  setTimeout(getThirdImage,3000);
}


function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
  setTimeout(getFourthImage,3000);
}

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";   // last one no need to put anything but you can if you wish
}
1
Viney 10 Янв 2017 в 07:18
 <script type="text/javascript">
 $("#slideshow > div:gt(0)").hide();
 setInterval(function() {
 $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 1200);
</script>

Я вижу, что у вас есть getElementById, поэтому я предполагаю, что у вас есть какой-то HTML? это скрипт jquery с предположением, что у вас есть div с классом с именем slideshow, любой div, который вы вложите в этот div, будет в слайд-шоу! надеюсь это поможет

0
KarpeDM 10 Янв 2017 в 05:21

Вот рабочее решение. Надеюсь, это поможет!

setInterval(miFuncion, 2500);

var counter = 1;

function miFuncion()
 {
    var elemento = document.getElementById("foto");

    if(counter === 0 ){
      elemento.src = "http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg";
    }
    else if(counter === 1){
      elemento.src = "http://www.fashiontrends.pk/wp-content/uploads/2012/02/Porsche-Sports-Car.jpg";
    }
    else if(counter === 2){
      elemento.src = "http://bestcarlive.com/wp-content/uploads/bmw-sports-car-wallpapers-20140720034912-53cb3c380a9cf.jpg";
    }
    else if(counter === 3){
      elemento.src = "http://media.caranddriver.com/images/17q1/674191/2018-kia-stinger-sports-sedan-photos-and-info-news-car-and-driver-photo-674389-s-450x274.jpg";
      counter = -1;
    }
    ++counter;
 }
<img src="http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg" id="foto" width="100%" height="350">  
1
HenryDev 10 Янв 2017 в 06:52