Question

我正在尝试制作一个滑块。我有四个内容，我一个接一个地制作它们并且看不见。然后我有一个名为active-client的类，它具有display: flex属性。我用jQuery addClass()显示第一个内容。我想用箭头滑动它们，但它不起作用。

$( document ).ready(function() {
    clientSection();
});

function clientSection(){
    $('.client-unit').first().addClass('active-client');

    $('.client-control-next, .client-control-prev').click(function() {
        var $this = $(this),
            curActiveClient = $('.clients-belt').find('.active-client'),
            position = $('.clients-belt').children().index(curActiveClient),
            clientNum = $('.client-unit').length;

        if ($this.hasClass('client-control-next')) {
            if (position < clientNum -1) {
                $('.active-client').removeClass('active-client').next().addClass('active-client');
            } else {
                $('.client-unit').removeClass('active-client').first().addClass('active-client');
            }
        } else {
            if (position === 0) {
                $('.client-unit').removeClass('active-client').last().addClass('active-client');
            } else {
                $('.active-client').removeClass('active-client').prev().addClass('active-client');
            }
        }
    });
}

#clients {
    position: relative;
}

.clients-belt {
    width: 100%;
    position: relative;
}

.clients-belt .client-unit {
    max-width: 750px;
    margin: 0 0 50px -375px;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
    display: none;
}

.clients-belt .client-unit.active-client {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.clients-belt .client-unit .client-face {
    min-width: 300px;
    text-align: center;
}

.clients-belt .client-unit .client-face img {
    max-width: 100px;
    border-radius: 50%;
}

.clients-belt .client-unit .client-face .client-name {
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.clients-belt .client-unit .client-face .client-title {
    font-size: 12px;
    font-style: normal;
    color: #999;
}

.clients-belt .client-unit .client-content {
    font-size: 18px;
    line-height: 36px;
    font-weight: 300;
    margin-top: -10px;
    position: relative;
}

.client-controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.client-controls > div {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.client-controls .client-control-next {
    position: absolute;
    top: 50%;
    right: 10px;
}

.client-controls .client-control-prev {
    position: absolute;
    top: 50%;
    left: 10px;
}

<div class="client-controls">
    <div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
    <div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client1.jpg" alt="client-face">
            <strong class="client-name">Denn Summer</strong>
            <em class="client-title">Director of Programmer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client2.jpg" alt="client-face">
            <strong class="client-name">Sott Spring</strong>
            <em class="client-title">Director of Designer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client3.jpg" alt="client-face">
            <strong class="client-name">Bonn Winter</strong>
            <em class="client-title">Nothing of Web</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client4.jpg" alt="client-face">
            <strong class="client-name">Kate Roses</strong>
            <em class="client-title">Director of Nothing</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我已经根据HTML标记的结构改变了这部分的代码。

if ($this.hasClass('client-control-next')) {
                if (position < clientNum -1) {
                    $('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
                } else {
                    $('.client-unit').removeClass('active-client').first().addClass('active-client');
                }

} else {

                if (position === 0) {
                    $('.client-unit').removeClass('active-client').last().addClass('active-client');
                } else {

                    $('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
                }

}

请参阅此fiddle。

jQuery next（）。addClass（）和prev（）。addClass（）问题

1 个答案: