Javascript 滑块导航按钮将不显示

我创建了一个纯CSS滑块，现在我正在尝试添加导航按钮。我希望所有四个按钮在任何图像上都保持可见状态，然后当单击第一个按钮时，它会将它们带到第一个图像

现在我的单选按钮只显示每张图片，出于某种原因显示在图片上方。我希望所有四个都

显示：inline

。然后单击按钮时显示正确的幻灯片

我做错了什么

#公司滑块部分{
宽度：100%；
高度：800px；
}
div#滑块{
宽度：100%；
/*最大宽度：1000px*/
溢出：隐藏；
}
div#滑块图形{
位置：相对位置；
宽度：400%；
保证金：0；
填充：0；
字号：0；
文本对齐：左对齐；
动画：20年代公司滑块无限；
}
@关键帧公司滑块{
0%{左：0%；}
20%{左：0%；}
25%{左：-100%；}
45%{左：-100%；}
50%{左：-200%；}
70%{左：-200%；}
75%{左：-300%；}
95%{左：-300%；}
100%{左：-300%；}
}
div#滑块图img{
宽度：25%；
高度：自动；
浮动：左；
}
/*div#滑块图形：悬停{动画播放状态：暂停；}*/
div#slider li{
列表样式：无；
}
div#滑块标签{
背景色：#111；
底部：.5em；
光标：指针；
显示：块；
高度：.5em；
位置：绝对位置；
宽度：.5em；
z指数：10；
}
#滑块li：第n个子（1）标签{
左：.5em；
}
#滑块li：第n个子（2）标签{
左：2米；
}
#滑块li：第n个子（3）标签{
左：3.5em；
}
#滑块li：第n个子（4）标签{
左：5em；
}

像这样：

好吧，jQuery。（如果不喜欢使用jQuery（-：），只需使用本机DOM方法

单击图像以重新启动动画

棘手的事情是，如果将动画应用于某个元素，则不能设置（至少）正在设置动画的属性的样式（在本例中为左），因此我不能将动画手动控制暂停到按钮上，然后恢复动画。我必须删除动画，然后将其添加回

---

一种更彻底的方法似乎是在cssRules上获得一个句柄，然后用JavaScript控制动画关键帧。但我没有时间这么做，而且，无论如何，我不确定它是否已准备好生产。

。您实际上是如何计划按钮在单击时显示其图像的？看起来您正在计划如果你想要一个没有JavaScript的纯CSS解决方案，你可能可以使用单选按钮和CSS的：checked伪选择器来做一些事情。当button1为：checked时，显示图像1-隐藏其余部分？但是为什么你不想使用JavaScr呢ipt？。您的单选按钮在每张图像上显示一个，因为html就是这样做的。我对javascript的导航按钮持开放态度。我只是想让转换保持纯css。@Justinwylie我怎么能用javascript实现它？谢谢。关于这一点，我有两个问题，当其中一个输入是selec时，为什么滑块不保持转换ted？还有，在选中某个按钮时，如何向其中一个按钮添加活动样式？对于活动按钮，我创建了一个名为“活动”的类，并将这行代码“$（'.control button'）.addClass（'active'）；”放在“$（'.control button'）下。addClass（'active'））但是它改变了所有的按钮。我已经更新了我的小提琴，并试着加入一些解释性的评论。

$('input[name="grp"]').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');
   posStr = '-' + pos + '%';
   $('.figure').css('left', posStr );

});

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

})