javascript - 带 CSS slider 的导航按钮

Question

我有一个 CSS slider ，除了两件我无法弄清楚的事情外，大部分都可以使用。第一个是，如何让我的 slider 导航按钮按照我想要的方式工作。现在，如果您单击一个按钮，我的 addClass 会将 .active 添加到所有按钮，而不仅仅是单击的按钮。除此之外，我不知道如何将 slider 位置与导航菜单相关联。我的意思是，如果用户没有点击任何按钮，我仍然希望按钮显示哪张幻灯片处于事件状态。

我的第二个问题是无论何时单击按钮都会停止幻灯片放映。

我在尝试中做错了什么？

题外话，但是将我现在拥有的内容转换为淡入幻灯片而不是滑动它们会很困难吗？

$('.control-button').click(function() {
    button = $(this).attr('id');
    id = button.replace('slide', '');
    pos = (id - 1) * 100;
    $('div#slider figure').css('animation-play-state', 'paused');
    $('div#slider figure').removeClass('figure2');
    $('.control-button').addClass('active');
    posStr = '-' + pos + '%';
    $('.figure').css('left', posStr);
});

$('img').click(function() {
    $('div#inner').css('left', '0px');
    $('div#slider figure').addClass('figure2');
    $('div#slider figure').css('animation-play-state', 'running');

})

div#slider {
    width: 100%;
    overflow: hidden;
}
div#slider .figure {
    position: relative;
    width: 400%;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: left;
    /*animation: 20s company-slider infinite;*/
}
.figure2 {
    animation: 20s company-slider infinite;
}
@keyframes company-slider {
    0% {
        left: 0%;
    }
    30% {
        left: 0%;
    }
    35% {
        left: -100%;
    }
    55% {
        left: -100%;
    }
    60% {
        left: -200%;
    }
    90% {
        left: -200%;
    }
    95% {
        left: -300%;
    }
    100% {
        left: -300%;
    }
}
div#slider figure img {
    width: 25%;
    min-height: 100%;
    float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/

div#slider li {
    list-style: none;
}
div#slider label {
    background-color: #111;
    bottom: .5em;
    cursor: pointer;
    display: block;
    height: .5em;
    position: absolute;
    width: .5em;
    z-index: 10;
}
#controls {
    width: 100%;
    height: auto;
}
#control-container {
    padding: 25px 12%;
}
.control-button {
    display: inline;
    margin: 0 2%;
    width: 25%;
    background: gray;
    height: 10px;
    border: none;
}
.control-button.active {
    display: inline;
    margin: 0 2%;
    width: 25%;
    background: black;
    height: 10px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="slider">
    <figure class="figure figure2">
        <img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
        <img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
        <img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
        <img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
    </figure>
    <div id="controls">
        <div id="control-container">
            <button id="slide1" class="control-button"></button>
            <button id="slide2" class="control-button"></button>
            <button id="slide3" class="control-button"></button>
        </div>
    </div>
</div>

Answer 1

这会激活所有按钮:

$('.control-button').addClass('active');

替换为:

$('.control-button').removeClass('active');
$(event.target).addClass('active');

将 event 参数添加到函数中，以便您可以使用 event.target:

$('.control-button').click(function(event) {

---

编辑:

当图像滑动时让控制按钮“自然地”激活有点困难。

让每张图片都有一个属性，说明它是哪张幻灯片:

<figure class="figure figure2">
    <img data-number="slide1" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
    <img data-number="slide2" src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
    <img data-number="slide3" src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
    <img data-number="slide4" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>

创建一个系统来检测图像何时进入 View :

window.setInterval(function() {

检测正在显示的图像:

    var activeImage = document.elementFromPoint($(window).width()/2, 10); // The image at the horizontal midpoint of the screen

设置相应控制按钮的class为active:

    $('.control-button').removeClass('active');
    $("#"+$(activeImage).attr("data-number")).addClass('active'); // Sets whichever control button that corresponds to the image under the horizontal midpoint of the screen as active

设置在 setInterval 结束时检查的频率:

}, /*time interval in miliseconds*/);