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

jQuery slideshow, go to previous image

本文关键字：一张 幻灯片 jQuery      更新时间：2023-09-26

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

任何帮助，不胜感激。

您的问题是滑块第一个孩子不存在 prev（'img'）。所以像这样改变你的函数：

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

试试这个 #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');
            });
相关文章：