Question

我是JQuery / JavaScript的新手，但我为网站制作了旋转木马，我想知道如何让按钮控制各自的旋转木马。

继承人JSFiddle - https://jsfiddle.net/z6q6bgzq/

HTML -

<div>
  <div class="carousel-slide">
    <div class="focus">
      SLIDE 1
    </div>
    <div>
      SLIDE 2
    </div>
    <div>
      SLIDE 3
    </div>
    <div>
      SLIDE 4
    </div>
    <div>
      SLIDE 5
    </div>
  </div>
  <div style="position: relative; top:20px;">
    <button class="arrow left">&lt;---</button>
    <button class="arrow right">---></button>
  </div>
</div>

<div style="position: relative; top:20px;">
  <div class="carousel-slide">
    <div class="focus">
      SLIDE 1
    </div>
    <div>
      SLIDE 2
    </div>
  </div>
  <div style="position: relative; top:20px;">
    <button class="left">&lt;---</button>
    <button class="right">---></button>
  </div>
</div>

jquery的：

$(document).ready(function(){

    $(".right").click(function(){
        var $next = $(".focus").removeClass("focus").next("div",".carousel-slide");
        if ($next.length){
            $next.addClass("focus");
        }else{
            $("div:first",".carousel-slide").addClass("focus");
        }
    });

    $(".left").click(function){
        var $prev = $(".focus").removeClass("focus").prev("div",".carousel-slide");
        if ($prev.length){
            $prev.addClass("focus");
        }else{
            $("div:last",".carousel-slide").addClass("focus");
        }
    });
});

Answer 1

您可以这样做：

＆＃13;

$(document).ready(function(e){
    
        $(".right").click(function(e){
            
            var $next = $(this).parent().prev().find(".focus").removeClass("focus").next("div");
            if ($next.length){
                $next.addClass("focus");
            }else{
               $(this).parent().prev().children().first().addClass("focus");
            }
        });

        $(".left").click(function(e){
            var $prev = $(this).parent().prev().find(".focus").removeClass("focus").prev("div");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $(this).parent().prev().children().last().addClass("focus");
            }
        });
});

＆＃13;

.carousel-slide > div{
    transition: opacity 400ms;
    opacity: 0;
    position: absolute;
}
.carousel-slide > .focus{
    opacity: 1;
    position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
            <div class="carousel-slide"> <!--previous -->
                <div class="focus">
                    SLIDE 1
                </div>
                <div>
                    SLIDE 2
                </div>
                <div>
                    SLIDE 3
                </div>
                <div>
                    SLIDE 4
                </div>
                <div>
                    SLIDE 5
                </div>
            </div>
            <div style="position: relative; top:20px;"> <!--parent-->
                <button class="arrow left">&lt;---</button>
                <button class="arrow right">---></button>
            </div>
             
            
            <div style="position: relative; top:20px;">
            <div class="carousel-slide">
                <div class="focus">
                    SLIDE 1
                </div>
                <div>
                    SLIDE 2
                </div>
            </div>
              <div style="position: relative; top:20px;">
                  <button class="left">&lt;---</button>
                  <button class="right">---></button>
              </div>
           
</div>

＆＃13;

所以，你必须相应改变选择器（$ prev / $ next vars）和其他一些东西。我在HTML中发表评论以便于理解。你必须遍历DOM，找到父按钮div和以前的兄弟。现在，当选择者没有“贪婪”时（你不是在页面上用.carousel-slide类定位所有div），一切都应该可以正常工作。

P.S。如果你保持当前的HTML结构，你可以这样添加更多的轮播。

Answer 2

所以基本上，你需要一些东西来识别旋转木马2中的旋转木马1？这就是身份证进来的地方。

$(document).ready(function(e){

        $("#C1Right").click(function(e){
            var $next = $("#carousel1 .focus").removeClass("focus").next("div",".carousel-slide");
           if ($next.length){
                $next.addClass("focus");
            }else{
                $("div:first","#carousel1 .carousel slide").addClass("focus");
            }
        });

        $("#C1Left").click(function(e){
            var $prev = $("#carousel1 .focus").removeClass("focus").prev("div",".carousel-slide");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $("div:last","#carousel1 .carousel-slide").addClass("focus");
            }
    });

$("#C2Right").click(function(e){
            var $next = $("#carousel2 .focus").removeClass("focus").next("div",".carousel-slide");
            if ($next.length){
                $next.addClass("focus");
            }else{
                $("div:first","#carousel2 .carousel-slide").addClass("focus");
            }
        });

        $("#C2Left").click(function(e){
            var $prev = $("#carousel2 .focus").removeClass("focus").prev("div",".carousel-slide");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $("div:last","#carousel2 .carousel-slide").addClass("focus");
            }
        });


    });

多个不相互控制的自定义轮播

2 个答案: