jQuery幻灯片，转到上一张图片

Posted 2023-02-25

【中文标题】jQuery幻灯片，转到上一张图片

【英文标题】：jQuery slideshow, go to previous image

【发布时间】：2016-03-01 13:39:50

【问题描述】：

试图使 .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');
          );

感谢任何帮助。

【问题讨论】：

最好做个小提琴...

能否请您编写完整的代码，以便更容易为您提供帮助！

好的，马上更新

【参考方案1】：

您的问题是滑块第一个孩子不存在 prev('img') 。所以像这样改变你的功能：

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

【讨论】：

感谢您为我解释清楚！这行得通，谢谢！

【参考方案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');
            );

【讨论】：

差不多。在第一次单击时，下一个（不是上一个）图像将出现在当前图像的下方（而不是实际上在上一个图像中消失）。可在第三次点击时使用。

欣赏它。这次它在第一次点击时转到下一个图像（而不是上一个）。在第 2 次单击时，它会返回显示的第一个图像（slide1.png），但在第 3 次单击时，它会显示前一个图像（slide3.png）