使用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> 

我發現的是，我應該使用功能bis（）但我不知道如何！

Answer 1

請試試這個代碼腳本部分

記本

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"); 

}