jQuery幻燈片，轉到上一張圖片

Question

試圖使.next（）以相反的方式工作，因此它會轉到幻燈片中的上一張圖像，而不是下一張，但是，當我按下按鈕時它變爲空白沒有出現）。

<div id="slider"> 
    <img src="slide1.png" class="sliderImage" /> 
    <img src="slide2.png" class="sliderImage" /> 
    <img src="slide3.png" class="sliderImage" /> 
</div> 

<a href="javascript:void(0)"><div id="relative"><i class="fa fa-chevron-left" id="sliderArrowLeft"></i></div></a> 
<a href="javascript:void(0)"><div id="relative"><i class="fa fa-chevron-right" id="sliderArrowRight"></i></div></a> 

腳本：

$('#slider img:gt(0)').hide(); 
     setInterval(function(){ 
      $('#slider :first-child').hide() 
      .next('img').delay(1).fadeIn() 
      .end().appendTo('#slider');}, 
      30000); 

      $("#sliderArrowRight").click(function() { 
       $('#slider :first-child').hide() 
      .next('img').delay(1).fadeIn() 
      .end().appendTo('#slider'); 
      }); 

      $("#sliderArrowLeft").click(function() { 
       $('#slider :first-child').hide() 
      .prev('img').delay(1).fadeIn() 
      .end().appendTo('#slider'); 
      }); 

任何幫助表示讚賞。

Answer 1

您的問題是上一個（ 'IMG'）不存在滑塊的第一個孩子。所以改變你的功能是這樣的：

$("#sliderArrowLeft").click(function() { 
    $('#slider :first-child').hide(); 
    $('#slider :last-child').delay(1).fadeIn().prependTo('#slider'); 
}); 

Answer 2

嘗試一下本作#sliderarrowleft

  $('#slider img:gt(0)').hide(); 
      setInterval(function() { 
       $('#slider :first-child').hide() 
         .next('img').delay(1).fadeIn() 
         .end().appendTo('#slider'); 
       },30000); 

      $("#sliderArrowRight").click(function() { 
       $('#slider :last-child').hide(); 
       $('#slider :first-child').hide() 
         .next('img').delay(1).fadeIn() 
         .end().appendTo('#slider'); 
      }); 

      $("#sliderArrowLeft").click(function() { 
       $('#slider :first-child').hide(); 
       $('#slider :last-child').hide() 
         .prev('img').delay(1).fadeIn() 
         .end().prependTo('#slider'); 
      });