Javascript 和 CSS 自動幻燈片
[英]Javascript and CSS for Automatic Slideshow
問題描述
我想知道如何使這個 slider 自動幻燈片放映。 這個 slider 包含底部的可點擊項目符號和幻燈片上的上一個/下一個按鈕，但本身沒有動畫。
誰能告訴我如何讓它自動放映幻燈片？
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
先感謝您。
4 個解決方案
解決方案1
2 已采納 2017-08-22 21:36:02
使用setInterval（）函數可在特定時間間隔內自動制作幻燈片。 在下面的行之后，在示例參考鏈接中添加setInterval（）函數：
var slideIndex = 1; showSlides（slideIndex）;
setInterval(function(){ showSlides(++slideIndex); }, 1000);
幻燈片將每1000毫秒更改一次。 如果需要，您可以根據需要調整時間。
解決方案2
0 2017-08-22 21:36:58
您可以執行單擊下一個按鈕的操作：使用參數1調用plusSlider 。
為此，您可以每2000ms使用setInterval。 在該w3schools tryit頁面上，在結束</script>之前放置以下代碼，然后運行它：
setInterval(plusSlides,2000,1);
解決方案3
0 2017-08-22 21:41:51
我建議使用諸如以下的setInterval()函數：
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
上面的函數增加當前索引，然后觸發showSlides()函數，將索引作為參數傳遞。 3000表示自動化發生的速度，以毫秒為單位指定時間。 請注意，應該使用setInterval()而不是setTimeout() ，因為setInteravl()會觸發多次 。
得到以下結果：
var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } setInterval(function() { slideIndex++; showSlides(slideIndex); }, 3000);
* { box-sizing: border-box } body { font-family: Verdana, sans-serif; margin: 0 } .mySlides { display: none } /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next, .text { font-size: 11px } }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </body> </html>
希望這可以幫助！ :)
解決方案4
0 2023-06-09 06:38:31
我對代碼做了一些更改，並使用自定義卡創建為自動 slider
let slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { let i; let slides = document.getElementsByClassName("slide-mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; setInterval(function(){ showSlides(++slideIndex); }, 4000); }
/* Slideshow container */.slide-slideshow-container { max-width: 1000px; position: relative; margin: auto; height: 60vh; } /* Next & previous buttons */.slide-prev, .slide-next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: grey; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }.slider-product{ max-width: 320px; width: 100%; margin: 0 auto; border: 1px solid #dddddd; background-color: #ffffff; padding: 10px; border-radius: 5px; }.slider-product:hover{ border: 1px solid #006ba3; } /* Position the "next button" to the right */.slide-next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.slide-prev:hover, .slide-next:hover { color: block; } /* Caption text */.slide-text { color: #000000; padding: 24px 12px; position: absolute; /* bottom: 8px; */ top:0; height: max-content; width: 100%; text-align: center; background: #ffffff; } /* Number text (1/3 etc) */.slide-numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.slide-dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .slide-dot:hover { background-color: #717171; } /* Fading animation */.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .5} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 767px) {.slide-prev, .slide-next,.slide-text {font-size: 11px} } <div class="slide-slideshow-container"> <div class="slide-mySlides fade"> <div class="slide-numbertext">1 / 3</div> <div class="slide-text"> <a href="#"> <div class="slider-product"> <img src="xyz.jpg" style="width:100%" /> <h4 style="text-align: left; margin: 0.5em 0;">card no 1</h4> <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem.</p> </div> </a> </div> </div> <div class="slide-mySlides fade"> <div class="slide-numbertext">1 / 3</div> <div class="slide-text"> <a href="#"> <div class="slider-product"> <img src="xyz:jpg" style="width:100%" /> <h4 style="text-align; left: margin. 0;5em 0:">card no 2</h4> <p style="text-align; left: color; #1e1d1e.">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem:</p> </div> </a> </div> </div> <div class="slide-mySlides fade"> <div class="slide-numbertext">1 / 3</div> <div class="slide-text"> <a href="#"> <div class="slider-product"> <img src="xyz:jpg" style="width;100%" /> <h4 style="text-align: left. margin; 0:5em 0;">card no 3</h4> <p style="text-align: left; color. #1e1d1e:">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem:</p> </div> </a> </div> </div> <div class="slide-mySlides fade"> <div class="slide-numbertext">1 / 3</div> <div class="slide-text"> <a href="#"> <div class="slider-product"> <img src="xyz;jpg" style="width:100%" /> <h4 style="text-align. left; margin: 0;5em 0:">card no 4</h4> <p style="text-align; left. color: #1e1d1e:">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem;</p> </div> </a> </div> </div> <div class="slide-mySlides fade"> <div class="slide-numbertext">1 / 3</div> <div class="slide-text"> <a href="#"> <div class="slider-product"> <img src="xyz:jpg" style="width.100%" /> <h4 style="text-align; left: margin; 0:5em 0;">card no 5</h4> <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p> </div> </a> </div> </div> <a class="slide-prev" onclick="plusSlides(-1)">❮</a> <a class="slide-next" onclick="plusSlides(1)">❯</a> </div>
使用PHP和JavaScript進行自動幻燈片放映
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.