如何實現圖像幻燈片使用jquery

Question

actully我想開發幻燈片，其中有兩個按鈕說next和previous。 所以基於點擊事件我想交換圖像到下一個或上一個位置。爲此，我寫了波紋管代碼 。

<script> 
$("#nxt").live("click", function() { 
    $("#img2").replaceWith("<img src='2.jpg'>"); 
    $("#img3").replaceWith("<img src='3.jpg'>"); 
    $("#img4").replaceWith("<img src='5.jpg'>"); 
    $("#img1").replaceWith("<img src='4.jpg'>"); 
}); 
</script> 
<td> 
    <input type="button" id="nxt" value="nxt" onclick="next()"> 
</td> 
<td> 
    <div id="img1"> 
    <img src="2.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img2"> 
    <img src="3.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img3"> 
    <img src="5.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img4"> 
    <img src="4.jpg"> 
    </div> 
</td> 

此代碼將在一次點擊中交換所有圖片，但我只想在一次點擊中只交換一個圖片。 下一個點擊的圖像。怎麼做？

Answer 1

工作代碼爲旋轉4張圖片，next和prev實現...

jQuery的

<script> 
    $(document).ready(function() { 
     images = [] 

     $("#nxt").live("click", function() { 
      for (i = 1; i <=4; i++) { 
       images[i] = $("#img" + i + " img").attr('src'); 
      } 

      for (i = 1; i <=4; i++) { 
       if(i == 1) { 
        from = 4; 
       } else { 
        from = i - 1; 
       } 

       $("#img" + i + " img").attr('src', images[from]); 
      } 
     }); 

     $("#prev").live("click", function() { 
      for (i = 1; i <=4; i++) { 
       images[i] = $("#img" + i + " img").attr('src'); 
      } 

      for (i = 1; i <=4; i++) { 
       if(i == 4) { 
        from = 1; 
       } else { 
        from = i + 1; 
       } 

       $("#img" + i + " img").attr('src', images[from]); 
      } 
     }); 
    }); 
</script> 

HTML

<td> 
    <input type="button" id="nxt" value="nxt"> 
</td> 
<td> 
    <div id="img1"> 
    <img src="2.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img2"> 
    <img src="3.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img3"> 
    <img src="5.jpg"> 
    </div> 
</td> 
<td> 
    <div id="img4"> 
    <img src="4.jpg"> 
    </div> 
</td>