带有 CSS 滑块的导航按钮

Question

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

我的第二个问题是，只要单击按钮，它就会停止幻灯片放映。

我在尝试中做错了什么？

题外话，但是将我现在必须在幻灯片中淡入淡出而不是滑动它们的内容进行过渡会很困难吗？

$('.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>

创建一个系统来检测图像何时进入视野：

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*/);

Answer 2

至于为所有按钮添加“活动”，您应该替换它：

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

用这个：

$('.control-button').removeClass('active');  //this removes all '.active' first
     $(this).addClass('active');

这里发生的是，在 .control-button 点击​​函数中，$(this) 代表当前的 .control-button 元素。

Answer 3

https://jsfiddle.net/q3j01xrs/
那这个呢？我改进了你的脚本。我取出了您的 CSS 动画并用另一个 JavaScript 动画替换了它。看看吧！

$('.control-button').click(function() {
  clearInterval(setInt);
  $('.control-button').removeClass('active');
  $(this).addClass('active');
  var getIndex = $(this).index('.control-button');
  $('.figure img').hide();
  $('.figure img').eq(getIndex).show();
  setInt = setInterval(slide, 5000);
});

function slide() {
  var getIndex = $('.figure img:visible').index('.figure img');
  $('.control-button').removeClass('active');
  $('.figure img:visible').animate({
    width: 'toggle'
  }, 350);
  getIndex++;
  if ((getIndex) == $('.control-button').length) {
    $('.control-button').eq(0).addClass('active');
    $('.figure img').eq(0).animate({
      width: 'toggle'
    }, 350);
  } else {
    $('.control-button').eq(getIndex).addClass('active');
    $('.figure img').eq(getIndex).animate({
      width: 'toggle'
    }, 350);
  }
};
var setInt = setInterval(slide, 5000);