javascript - 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() demo

它将向您展示与您在第一个元素时所获得的相同体验。

要修复此问题，请添加条件(如果您位于第一个元素，然后单击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>