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它应该定位最后一个元素。

＆＃13;

$(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");
          });
        }
    });
});

＆＃13;

ul {
  list-style: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

将其设为fadeOut后，下一个可见选择器将无法工作，因为没有任何可见元素。

试试这个：

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

jQuery Carousel无法点击

2 个答案: