多个不相互控制的自定义旋转木马

Question

我是jQuery/javaScript的新手

HERES 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

您可以做这样的事情：

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

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

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

因此，您必须更改选择器（$ prev/$ next var）和其他几件事。我在HTML中发表了评论，以便于理解。您必须穿越DOM，找到父按钮DIV和以前的兄弟姐妹。现在，当选择器不是"贪婪"（您不是针对页面上的.carousel-slide类的所有Divs）时，所有这些都应该正常工作。

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

Answer 2

基本上，您需要一些东西来从轮播2中识别旋转木马1？那是ID进来的地方。

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

    });