Сделайте повторные снимки с использованием javascript

Question

Я хочу создать анимацию с использованием JavaScript.

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

Что я хочу: pic1> pic2> pic3> pic4> pic5> pic1> ...

Код:

<style type="text/css"> 
    img { 
     position: absolute; 
     center: 0px; 
     top: 0px; 
    } 

    #img3 { z-index: 3; } 
    #img2 { z-index: 2; } 
    #img1 { z-index: 1; } 
</style> 

<img style="top: 0px; height: 199px;" src="img1.jpg" id="img1"> 
<img img2.jpg" id="img2"><img src="img3.jpg" id="img3"> 


<script src="http://code.jquery.com/jquery.js"></script> 
<script> 
    $(function() { 
     $('img').first().fadeOut(2000, function suivante() { 
      $(this).next('img').fadeOut(2000,suivante); 
     }); 
    }); 
</script> 

То, что я нашел то, что я должен использовать функцию бис(), но я не знаю, как это сделать!

Answer 1

Пожалуйста, попробуйте этот код

Kee это в разделе сценария

var image1 = new Image() 
    image1.src = "images/1.jpg" 
    var image2 = new Image() 
    image2.src = "images/2.jpg" 
    var image3 = new Image() 
    image3.src = "images/3.jpg" 
    var image4 = new Image() 
    image4.src = "images/4.jpg" 
    var image5 = new Image() 
    image5.src = "images/5.jpg" 
    var image6 = new Image() 
    image6.src = "images/6.jpg" 
    var image7 = new Image() 
    image7.src = "images/7.jpg" 



<img src="images/1.jpg" name="slide" style="float:left;padding-right:10px;height:100px;width:250px" /> 
       <script> 
     <!-- 
      //variable that will increment through the images 
      var step = 1 
      function slideit() { 
       //if browser does not support the image object, exit. 
       if (!document.images) 
        return 
       document.images.slide.src = eval("image" + step + ".src") 
       if (step < 7) 
        step++ 
       else 
        step = 1 
       //call function "slideit()" every 2.5 seconds 
       setTimeout("slideit()", 2000) 
      } 
      slideit() 
     //--> 
     </script> 

Answer 2

Все ваши делание скрывает все изображения, гаснуть, но никогда не делает их видимыми again.Add следующий код в начале из Функция suivante():

if($(this).attr("id")==="img5"){ 

    $('img').attr("display","block"); 

}