https://jsfiddle.net/2btt0qdp/
当您单击每个输入按钮时，此CSS滑块很有效。
它也可以自动运行，并相应地循环。
但他们并不能很好地协同工作。当我单击任何输入按钮时，自动动画仍会启动并循环播放，并滑动不存在的图像。试试看吧。我似乎无法让它发挥作用。
如何使CSS过渡和动画协同工作，使CSS Slider功能正常应用？
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
<input type="radio" id="button-2" name="controls"/>
<label for="button-2"></label>
<input type="radio" id="button-3" name="controls"/>
<label for="button-3"></label>
<input type="radio" id="button-4" name="controls"/>
<label for="button-4"></label>
<input type="radio" id="button-5" name="controls"/>
<label for="button-5"></label>
<label for="button-1" class="arrows" id="arrow-1">></label>
<label for="button-2" class="arrows" id="arrow-2">></label>
<label for="button-3" class="arrows" id="arrow-3">></label>
<label for="button-4" class="arrows" id="arrow-4">></label>
<label for="button-5" class="arrows" id="arrow-5">></label>
<div id="slideshow-inner">
<ul>
<li id="slide1">
<img src="" style="background-color: orange; width: 100%;" />
</li>
<li id="slide2">
<img src="" style="background-color: red; width: 100%;" />
</li>
<li id="slide3">
<img src="" style="background-color: yellow; width: 100%;" />
</li>
<li id="slide4">
<img src="" style="background-color: green; width: 100%;" />
</li>
<li id="slide5">
<img src="" style="background-color: blue; width: 100%;" />
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
h1 { color: white }
#slideshow-wrap {
display: block;
height: 320px;
margin: auto;
position: relative;
}
#slideshow-inner {
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
overflow: hidden;
position: relative;
}
#slideshow-inner>ul {
list-style: none;
height: 100%;
width: 500%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
-webkit-animation:slide 16s infinite;
-moz-animation: slide 16s infinite;
-o-animation: slide 16s infinite;
animation: slide 16s infinite;
}
#slideshow-inner>ul>li {
width: 20%;
height: 320px;
float: left;
position: relative;
}
#slideshow-inner>ul>li>img {
margin: auto;
height: 100%;
}
#slideshow-wrap input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
#slideshow-wrap label:not(.arrows):not(.show-description-label) {
position: absolute;
left: 50%;
bottom: -15px;
z-index: 100;
width: 12px;
height: 12px;
background-color: silver;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
}
#slideshow-wrap label:not(.arrows):active { bottom: -15px }
#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }
#slideshow-wrap label[for=button-1] { margin-left: -36px }
#slideshow-wrap label[for=button-2] { margin-left: -18px }
#slideshow-wrap label[for=button-4] { margin-left: 18px }
#slideshow-wrap label[for=button-5] { margin-left: 36px }
#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }
#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }
#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }
#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }
#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }
label.arrows {
font-family: 'WebSymbolsRegular';
font-size: 25px;
color: rgb(255,255,240);
position: absolute;
top: 50%;
margin-top: -25px;
display: none;
opacity: 0.7;
cursor: pointer;
z-index: 1000;
background-color: transparent;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}
label.arrows:hover { opacity: 1 }
label.arrows:active { margin-top: -23px }
input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
right: -55px;
display: block;
}
input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
left: -55px;
display: block;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }
input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }
input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }
@-webkit-keyframes slide{
0%,100% {
margin-left:0%;
}
10% {
margin-left:0%;
}
20% {
margin-left:-100%;
}
30% {
margin-left:-100%;
}
40% {
margin-left:-200%;
}
50% {
margin-left:-200%;
}
60% {
margin-left:-300%;
}
70% {
margin-left:-300%;
}
80% {
margin-left:-400%;
}
90% {
margin-left:-400%;
}
}
@-moz-keyframes slide{
0%,100% {
margin-left:0%;
}
10% {
margin-left:0%;
}
20% {
margin-left:-100%;
}
30% {
margin-left:-100%;
}
40% {
margin-left:-200%;
}
50% {
margin-left:-200%;
}
60% {
margin-left:-300%;
}
70% {
margin-left:-300%;
}
80% {
margin-left:-400%;
}
90% {
margin-left:-400%;
}
}
@keyframes slide{
0%,100% {
margin-left:0%;
}
10% {
margin-left:0%;
}
20% {
margin-left:-100%;
}
30% {
margin-left:-100%;
}
40% {
margin-left:-200%;
}
50% {
margin-left:-200%;
}
60% {
margin-left:-300%;
}
70% {
margin-left:-300%;
}
80% {
margin-left:-400%;
}
90% {
margin-left:-400%;
}
}