带有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-按钮单击功能中，$（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);