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'); 
      });