使用纯CSS使此滑块自动播放

Question

 .slider-container { width: 1000px; height: 500px; background-color: skyblue; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; overflow: hidden; position: relative; border-style: solid; border-radius: 5px; border-color: skyblue; } .menu { position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; } .menu label { cursor: pointer; display: inline-block; width: 16px; height: 16px; background: #fff; border-radius: 50px; margin: 0 .2em 1em; &:hover { background: red; } } .slide { width: 1000px; height: 500px; position: absolute; top: 0; left: 100%; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s .75s; } [id^="slide"]:checked+.slide { left: 0; z-index: 100; transition: left .65s ease-out; } .slide-1 { background-image: url("http://all4desktop.com/data_images/original/4238179-pictures.jpg"); } .slide-2 { background-image: url("http://www.qygjxz.com/data/out/180/4210843-picture.jpg"); } .slide-3 { background-image: url("http://www.qygjxz.com/data/out/179/5793047-picture.jpg"); }

 <!DOCTYPE html> <html> <body> <div class="slider-container"> <div class="menu"> <label for="slide-dot-1"></label> <label for="slide-dot-2"></label> <label for="slide-dot-3"></label> </div><input checked id="slide-dot-1" name="slides" type="radio"> <div class="slide slide-1"></div><input id="slide-dot-2" name="slides" type="radio"> <div class="slide slide-2"></div><input id="slide-dot-3" name="slides" type="radio"> <div class="slide slide-3"></div> </div> </body> </html>

I got this code and i really like it. 我得到了这段代码，我真的很喜欢它。 I wanted to learn how to make it go autoplay since it is manually operated. 我想学习如何使其自动播放，因为它是手动操作的。

Answer 1

Here's a vanilla JS carousel you can look at, it slides on its own and stops sliding if the user clicks the arrows for manual control. 这是一个您可以看到的普通JS转盘，它会自行滑动，如果用户单击箭头进行手动控制，它将停止滑动。

 //Changed index so 1 is actually first image, rather than starting at 0 index var index = 1; var paused = false; var slideShow = []; for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { slideShow[i] = document.getElementsByClassName("slideShow")[i]; slideShow[i].style.display = "none"; } slideShow[0].style.display = "inline"; var slides = setInterval(function() { if (index < slideShow.length) { index++; showDivs(); } else { index = 1; showDivs(); } },1000); function control(n) { clearInterval(slides); if (index+n > slideShow.length) { index = 1; } else if (index+n <= 0) { index = slideShow.length; } else { index += n; } showDivs(); } function showDivs() { //Hide all slideShow elements, and then show only the targeted element for (let i=1; i<=slideShow.length; i++) { slideShow[i-1].style.display = "none"; } slideShow[index-1].style.display = "inline"; }

 <button onclick="control(-1)" class="arrows" id="left"><</button> <p class="slideShow">1</p> <p class="slideShow">2</p> <p class="slideShow">3</p> <p class="slideShow">4</p> <p class="slideShow">5</p> <button onclick="control(1)" class="arrows" id="right">></button>

Answer 2

嘿，请使用无限的过渡时间使其自动播放

使用纯CSS使此滑块自动播放

问题描述

2 个解决方案

解决方案1
0 2017-10-17 18:48:44

解决方案2
0

使用纯CSS使此滑块自动播放

问题描述

2 个解决方案

解决方案1 0 2017-10-17 18:48:44

解决方案2 0

解决方案1
0 2017-10-17 18:48:44

解决方案2
0