Javascript 带有CSS滑块的导航按钮

我有一个CSS滑块，除了两件我无法理解的事情外，它在大多数情况下都能工作。首先，如何让我的滑块导航按钮的工作方式，我后。现在，如果您单击其中一个按钮，my

addClass

会将

.active

添加到所有按钮，而不是仅单击的按钮。除此之外，我不知道如何将滑块位置与导航菜单相关联。我的意思是，如果用户没有单击任何按钮，我仍然希望按钮显示哪个幻灯片处于活动状态

我的第二个问题是，每当单击按钮时，幻灯片放映就会停止

在我的尝试中我做错了什么

离题了，但我现在要将幻灯片中的内容转换为淡入淡出，而不是滑动幻灯片，这会很困难吗

$（'.control按钮'）。单击（函数（）{
按钮=$（this.attr（'id'）；
id=按钮。替换（'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'）。单击（函数（）{
$（'div#inner'）.css（'left'，'0px'）；
$（'div#slider figure'）.addClass（'figure2'）；
$（'div#slider figure'）.css（'animation-play-state'，'running'）；
})

div#滑块{
宽度：100%；
溢出：隐藏；
}
div#滑块。图{
位置：相对位置；
宽度：400%；
保证金：0；
填充：0；
字号：0；
文本对齐：左对齐；
/*动画：20年代公司滑块无限*/
}
.图2{
动画：20年代公司滑块无限；
}
@关键帧公司滑块{
0% {
左：0%；
}
30% {
左：0%；
}
35% {
左-100%；
}
55% {
左-100%；
}
60% {
左-200%；
}
90% {
左-200%；
}
95% {
左-300%；
}
100% {
左-300%；
}
}
div#滑块图img{
宽度：25%；
最小高度：100%；
浮动：左；
}
/*div#滑块图形：悬停{动画播放状态：暂停；}*/
div#slider li{
列表样式：无；
}
div#滑块标签{
背景色：#111；
底部：.5em；
光标：指针；
显示：块；
高度：.5em；
位置：绝对位置；
宽度：.5em；
z指数：10；
}
#控制{
宽度：100%；
高度：自动；
}
#控制容器{
填充：25px 12%；
}
.控制按钮{
显示：内联；
利润率：0.2%；
宽度：25%；
背景：灰色；
高度：10px；
边界：无；
}
.控制按钮。激活{
显示：内联；
利润率：0.2%；
宽度：25%；
背景：黑色；
高度：10px；
边界：无；
}

这个怎么样？我改进了你的剧本。我拿出你的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);

---

在向所有按钮添加“活动”时，应替换此按钮：

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

为此：

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

---

此处发生的情况是，在.control button click函数中，$（这）表示当前的.control button元素。

这使所有按钮都处于活动状态：

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

替换为：

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

将

事件

参数添加到函数中，以便可以使用

事件。目标

：

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

检测正在显示的图像：

    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

设置在关闭

设置间隔时要检查的频率：

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

当我单击另一个按钮时，它将如何删除？您是否知道如何才能使控制按钮在显示的每张幻灯片上始终显示一个活动按钮？是的，我知道我可以使用
removeclass
属性，但不确定如何构造它。简单地将其放在add类的顶部是不起作用的。这是因为帖子中有一个输入错误：OP put
removeClass（'.active'）
和
addClass（'active'）
。第一个在
活动之前有一个句号，这是不应该的。是的，有一个拼写错误。抱歉。有数百个滑块插件，为什么要创建另一个？看看你使用的ID和类，你走错了方向-最好检查一下其他人是怎么做的。谢谢。有没有办法让按钮在幻灯片更改时自然激活，而不必点击按钮？知道怎么做吗？
}, /*time interval in miliseconds*/);