javascript - slider 导航按钮将不显示

Question

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

现在，我的单选按钮仅在每张图片上显示，并且出于某种原因在图片上方显示。我希望所有四个都显示为 display: inline。然后在单击按钮时显示正确的幻灯片。

我做错了什么？

#company-slider-section {
	width: 100%;
	height: 800px;
}

div#slider {
	width: 100%;
	/*max-width: 1000px;*/
	overflow: hidden; 
}
div#slider figure {
	position: relative;
	width: 400%;
	margin: 0;
	padding: 0;
	font-size: 0;
	text-align: left;
	animation: 20s company-slider infinite; 
}
@keyframes company-slider { 
	0%  { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; } 
	75% { left: -300%; }
	95% { left: -300%; }
	100% { left: -300%; } 
}
div#slider figure img {
	width: 25%;
	height: auto;
	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;
}
#slider li:nth-child(1) label {
    left: .5em;
}
#slider li:nth-child(2) label {
    left: 2em;
}
#slider li:nth-child(3) label {
    left: 3.5em;
}
#slider li:nth-child(4) label {
    left: 5em;
}

<div id="slider">
				<figure>
					<li>
					<input type="radio" id="slide1" name="slide" checked>
					<label for="slide1"></label>
						<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
					</li>
					<li>
					<input type="radio" id="slide2" name="slide">
					<label for="slide2"></label>
						<img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
					</li>
					<li>
					<input type="radio" id="slide3" name="slide">
					<label for="slide3"></label>
						<img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
					</li>
					<li>
					<input type="radio" id="slide4" name="slide">
					<label for="slide4"></label>
						<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
					</li>
				</figure>
			</div>

Answer 1

像这样:https://jsfiddle.net/justinwyllie/8kgjy56r/

$('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');

})

嗯 - jQuery。 (如果您不喜欢使用 jQuery (-:)，只需使用 native DOM 方法。

点击图片重新开始动画。

事实证明，棘手的事情是，如果你有一个应用于元素的动画，你不能只设置(至少)正在动画的属性的样式(在本例中为左)，所以我不能只是暂停动画将控制权交给按钮，然后恢复动画。我不得不删除动画，然后再将其添加回来。

执行此操作的更彻底的方法似乎是获取 cssRules 的句柄，然后使用 JavaScript 控制动画关键帧。但我没有时间做这件事，而且我不确定它是否已准备好投入生产。