jquery - 给定一个包含幻灯片的滑块 div，我如何在点击时滚动到下一张幻灯片？

Question

所以我有这个 JSFiddle。我基本上有这个结构：

<div class="slider">
     <div class="slides">
         <div></div>
         <div></div>
         <div></div>
     </div>
 </div>

当我使用 JQuery 单击幻灯片时，如何滚动到下一张幻灯片？任何帮助是极大的赞赏。

标签： jqueryhtml

Answer 1

  
$(function(){
        $('div.arrow-button button.next').click(function(){
            var currentSlide =  $('div.slider div.slides div.active');
            var nextSlide = $('div.slider div.slides div.active + div');
            if (nextSlide.length == 0) {
                nextSlide = $('div.slider div.slides div:first-child');
            }
            currentSlide.removeClass('active');
            nextSlide.addClass('active');
        });
    });

div.slider div.slides div {
    width: 400px;
    height: 100px;
    background-color: gray;
    color: white;
    display: none;
}

    div.slider div.slides div.active {
        display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
    <div class="slides">
        <div class="active">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="arrow-button">
        <button type="button" class="next">next</button>
    </div>
</div>