jQuery旋转木马不工作

Question

我一直在尝试为我的网站制作旋转木马功能，但我似乎无法使其工作。它使用jQuery，应该在旋转木马中淡入和淡出照片，但是当我单击下一个和上一个按钮时，什么也不会发生。

JS：

$(window).ready(function() {
    $("#slide-next").click(function() {
        $(".carousel-item.visible").fadeOut();
        $(".carousel-item.visible").next().fadeIn("fast", function() {
            $(".carousel-item.visible").removeClass("visible");
            $(this).addClass("visible");
        });
    });
    $("#slide-prev").click(function() {
        $(".carousel-item.visible").fadeOut();
        $(".carousel-item.visible").prev().fadeIn("fast", function() {
            $(".carousel-item.visible").removeClass("visible");
            $(this).addClass("visible");
        });
    });
});

html：

<div id='left_scroll'><i id="slide-prev" class="el el-chevron-left"></i>
</div>
<ul class="carousel-list">
    <li class="carousel-item visible">
        <img src='images/ral1.png' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral2.png' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral3.jpg' />
    </li>
    <li style="display:none;" class="carousel-item">
        <img src='images/ral4.jpg' />
    </li>
</ul>
<div id='left_scroll'><i id="slide-next" class="el el-chevron-left"></i>
</div>

请记住，我是JQuery的新手。

Answer 1

这是因为当您在最后一个元素上时，请单击"下一步"，找不到元素。当您在第一个元素上时，请单击以前的单击其他元素。

查看prev()演示

它将向您展示您在第一个元素上时所拥有的经历。

要修复它，请添加条件，如果您在第一个元素上，则单击prev，它应以最后一个元素为目标。

$(window).ready(function() {
    $("#slide-next").click(function() {
        // instead of fadeout use `hide` instead to immediately hide 
        $(".carousel-item.visible").hide();
      
        var current = $(".carousel-item.visible");
        // if last child then you are clicking next
        if ( current.is( ".carousel-list li:last-child" ) ) {
          $(".carousel-item:first-child").fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(".carousel-item:first-child").addClass("visible");
          });
        }
        else {
          $(".carousel-item.visible").next().fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(this).addClass("visible");
          });
        }
    });
    $("#slide-prev").click(function() {
        // instead of fadeout use `hide` instead to immediately hide
        $(".carousel-item.visible").hide();
        var current = $(".carousel-item.visible");
        // if you're on first element then you clicked on prev
        if ( current.is( ".carousel-list li:first-child" ) ) {
          $(".carousel-item:last-child").fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(".carousel-item:last-child").addClass("visible");
          });
        }
        else {
          $(".carousel-item.visible").prev().fadeIn("fast", function() {
              $(".carousel-item.visible").removeClass("visible");
              $(this).addClass("visible");
          });
        }
    });
});

ul {
  list-style: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
                             
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <div id='left_scroll'><i id="slide-prev" class="el el-chevron-left">Prev</i></div>   
                    <ul class="carousel-list">  
                        <li class="carousel-item visible"><img src='http://dummyimage.com/100x100/000/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/f20045/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/0044f0/fff' /></li>  
                        <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/00f03c/fff' /></li>  
                    </ul> 
                <div id='left_scroll'><i id="slide-next" class="el el-chevron-left">Next</i></div>

Answer 2

使其淡出后，下一个可见的选择器无法正常工作，因为没有任何可见元素。

尝试以下操作：

$("#slide-next").click(function() {
    $(".carousel-item.visible").next().fadeIn("fast");
    $(".carousel-item.visible:first").fadeOut();
});