Question

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

现在，我所拥有的单选按钮仅显示每个图像，并且出于某种原因在图像上方。我希望所有四个人都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（ - :)，只需使用原生DOM方法。

单击图像以重新开始动画。

棘手的事情是，如果你有一个动画应用于一个元素你不能只设置（至少）属性的样式动画（在这种情况下左）所以我不能只是暂停动画手控制到按钮然后恢复动画。我不得不删除动画，然后将其添加回去。

更彻底的做法似乎是获取cssRules的句柄，然后使用JavaScript控制动画关键帧。但我没有时间做这件事，无论如何，我不确定它是否已准备就绪。

滑块导航按钮不会显示

1 个答案: