Javascript 和 CSS 自动幻灯片
[英]Javascript and CSS for Automatic Slideshow
问题描述
I would like to know how to make this slider to automatic slideshow.
我想知道如何使这个 slider 自动幻灯片放映。 This slider contains clickable bullets at the bottom and pre/next buttons on the slides but doesn't animate itself.这个 slider 包含底部的可点击项目符号和幻灯片上的上一个/下一个按钮，但本身没有动画。
Would anyone please let me know how to make it automatic slideshow?谁能告诉我如何让它自动放映幻灯片？
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
Thank you in advance.先感谢您。
4 个解决方案
解决方案1
2 已采纳 2017-08-22 21:36:02
Use setInterval() function to make the slideshow automatically for the certain time interval. 使用setInterval（）函数可在特定时间间隔内自动制作幻灯片。 Add the setInterval() function in your example reference link after the below line: 在下面的行之后，在示例参考链接中添加setInterval（）函数：
var slideIndex = 1;
setInterval(function(){ showSlides(++slideIndex); }, 1000);
The slide will be changed every 1000 milli seconds . 幻灯片将每1000毫秒更改一次。 If you need you can adjust the time as per your need. 如果需要，您可以根据需要调整时间。
解决方案2
0 2017-08-22 21:36:58
You could do what the click on the next button does: call plusSlider with a parameter 1 . 您可以执行单击下一个按钮的操作：使用参数1调用plusSlider 。
To do that every 2000ms your can use setInterval. 为此，您可以每2000ms使用setInterval。 On that w3schools tryit page put following code before the closing </script> then run it: 在该w3schools tryit页面上，在结束</script>之前放置以下代码，然后运行它：
setInterval(plusSlides,2000,1);
解决方案3
0 2017-08-22 21:41:51
What I would recommend is making use of a setInterval() function such as the following: 我建议使用诸如以下的setInterval()函数：
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
The above function increases the current index, then triggers the showSlides() function, passing the index as a parameter. 上面的函数增加当前索引，然后触发showSlides()函数，将索引作为参数传递。 The 3000 denotes the speed at which the automation should occur, with the time specified in millseconds. 3000表示自动化发生的速度，以毫秒为单位指定时间。 Note that setInterval() should be used rather than setTimeout() , because setInteravl() fires more than once . 请注意，应该使用setInterval()而不是setTimeout() ，因为setInteravl()会触发多次 。
This gives the following result: 得到以下结果：
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>
Hope this helps! 希望这可以帮助！ :) :)
解决方案4
0 2023-06-09 06:38:31
i have do some changes in the code, and create as a auto slider with custom card我对代码做了一些更改，并使用自定义卡创建为自动 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.