使用純CSS使此滑塊自動播放
[英]Make this slider autoplay with pure css
問題描述
.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>
我得到了這段代碼，我真的很喜歡它。 我想學習如何使其自動播放，因為它是手動操作的。
2 個解決方案
解決方案1
0 2017-10-17 18:48:44
這是一個您可以看到的普通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>
解決方案2
0
嘿，請使用無限的過渡時間使其自動播放
純 CSS 滑塊/輪播/帶自動播放/動畫和導航的幻燈片
[英]Pure CSS Slider / Carousel / Slideshow with Autoplay / Animation and Navigation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.