如何使用 HTML5、CSS 和 Javascript 制作图像轮播？
[英]How can I make an image carousel using HTML5, CSS and Javascript?
问题描述
When I run the file, I can only see the first image but it doesn't change after the slideInterval time.
当我运行文件时，我只能看到第一张图片，但在 slideInterval 时间后它不会改变。
I think the problem is in the Javascript code because everything the HTML and CSS part of this project was supposed to do, it is done.我认为问题出在 Javascript 代码中，因为该项目的 HTML 和 CSS 部分应该做的所有事情都已经完成了。 However, the image doesn't change.但是，图像不会改变。
I am a bit of a noob to Javascript so please point out anything even if it is obvious.我对 Javascript 有点菜鸟，所以请指出任何问题，即使它很明显。 Thanks beforehand!!预先感谢！
This is my Code:这是我的代码：
First Is Javascript, then CSS and then HTML:首先是 Javascript，然后是 CSS，然后是 HTML：
var slideInterval = 3500; function getFigures() { return document.getElementById("carousel").getElementsByTagName("figure"); } function nextImage() { var pointer; //var figures = getFigures; var figures = getFigures(); for(var i = 0; i < figures.length; i++){ if(figures[i].className == "visible") figures[i].className = ""; pointer = i; } if (++pointer == figures.length) { pointer = 0; } figures[pointer].className = 'visible'; setTimeout(nextImage(), slideInterval); } function startPlayback() { setTimeout(nextImage(), slideInterval); } startPlayback();
section#carousel > figure > img { display: none; margin: 0px auto; } section#carousel > figure.visible > img { display: block; position: relative; overflow: hidden; } section#carousel > figure > figcaption { display: none; } section#carousel > figure.visible > figcaption { display: block; text-align: center; font-weight: bold; font-size: 1.5em; }
<.DOCTYPE html> <html lang="en-US"> <head> <title>Contoso News</title> <link rel="stylesheet" href="../styles/style.css" /> </head> <body> <section id="carousel"> <figure class="visible"> <img src="../media/efficient_cars.png" alt="Efficient Cars"> <figcaption>Efficient Cars To Be Used In The Future</figcaption> </figure> <figure> <img src="../media/natural_disasters.png" alt="Natural Disasters"> <figcaption>Many Natural Disasters Are Thought To Happen More Often</figcaption> </figure> <figure> <img src="../media/health_records.png" alt="Health Records"> <figcaption>Many Doctors are Moving to Digital Health Records This Year</figcaption> </figure> </section> <script type="text/javascript" src="../js/carousel_script.js"></script> </body> </html>
5 个解决方案
解决方案1
1 2017-07-28 16:31:13
Use can use the jssor slider plugin to create responsively carousels.使用可以使用 jssor 滑块插件来创建响应式轮播。 Refer https://www.jssor.com/参考https://www.jssor.com/
解决方案2
0 2017-07-28 17:28:50
Your startPlayback() function only triggers once upon loading of the script.您的startPlayback()函数仅在加载脚本时触发一次。 In the second line of the function you created, startPlayback() , have it call itself again after the slideInterval delay, so that you create an unending loop.在您创建的函数的第二行startPlayback()中，让它在slideInterval延迟后再次调用自身，以便您创建一个无休止的循环。 I would also make the first line of that function trigger without a setTimeout and make the first call of your startPlayback() function trigger with a setTimeout .我还会在没有setTimeout的情况下使该函数的第一行触发，并在第一次调用startPlayback()函数时使用setTimeout触发。
For example:例如：
function startPlayback() {
nextImage();
window.setTimeout(startPlayback(), slideInterval);
}
window.setTimeout(startPlayback(), slideInterval);
解决方案3
0 2017-07-28 17:37:35
I recommend to use Bootstrap for a nice and responsively carousel.我建议使用 Bootstrap 来制作一个漂亮且响应迅速的轮播。
解决方案4
0 2017-07-28 17:43:09
You are also passing a function that you defined ( nextImage() ) into the setTimeout() method, not a variable containing an anonymous function, so include the "()" in that parameter.您还将您定义的function ( nextImage() ) 传递给setTimeout()方法，而不是包含匿名函数的变量，因此在该参数中包含“()”。 If you are using the W3Schools example as a reference, they are passing anonymous functions in the form of variables, which is why they don't include the "()".如果您使用 W3Schools 示例作为参考，它们将以变量的形式传递匿名函数，这就是它们不包含“()”的原因。 Since you are passing a function, add the "()".由于您传递的是函数，因此添加“()”。 In your case, the variable nextImage is undefined, but the function nextImage() is defined.在您的情况下，变量nextImage未定义，但函数nextImage()已定义。
解决方案5
0 2019-10-28 16:22:30
Try this试试这个
let slideIndex = 1; showSlides(slideIndex); // Next/previous controls function changeSlide(n) { showSlides(slideIndex += n); } // Indicator controls function currentSlide(n) { showSlides(slideIndex = n); } // Change image every 3 seconds setInterval("showSlides(++slideIndex)", 3000); function showSlides(n) { let i, slides, dots; slides = document.getElementsByClassName("carousel-item"); dots = document.getElementsByClassName("indicator"); 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"; }
* {box-sizing:border-box}.carousel { position: relative; overflow: hidden; }.carousel-inner { position: relative; width: 100%; overflow: hidden; }.carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: -webkit-transform.6s ease-in-out; transition: transform.6s ease-in-out; }.carousel-item img { width: 100%; height: auto; }.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; }.carousel-control-prev { left: 0; }.carousel-control-next { right: 0; }.carousel-control-next, .carousel-control-prev { display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; bottom: 0; z-index: 1; cursor: pointer; width: 15%; color: #fff; font-size: 2em; text-decoration: none; text-align: center; opacity: .5; transition: opacity.15s ease; }.carousel-indicators { position: absolute; right: 0; bottom: 0; left: 0; z-index: 15; display: -webkit-flex; display: flex; justify-content: center; padding-left: 0; margin-right: 15%; margin-left: 15%; list-style: none; }.carousel-indicators.indicator { box-sizing: content-box; -webkit-flex: 0 1 auto; flex: 0 1 auto; width: 35px; height: 5px; margin-right: 3px; margin-left: 3px; cursor: pointer; background-color: #fff; background-clip: padding-box; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: .5; transition: opacity.6s ease; }.active { background-color: red;important: color; red. } /* Fading animation */:fade { -webkit-animation. 1;5s fade: animation. 1;5s fade: } @-webkit-keyframes fade { from {opacity. :5} to {opacity: 1} } @keyframes fade { from {opacity. :5} to {opacity: 1} }
<div class="carousel"> <:-- Slides --> <div class="carousel-inner"> <div class="carousel-item fade"> <img src="https.//parrot-tutorial.com/images/nature_autumn,jpg" alt="Nature Autumn"> <div class="carousel-caption"> <h2>First slide</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit:</p> </div> </div> <div class="carousel-item fade"> <img src="https.//parrot-tutorial.com/images/nature_autumn_red,jpg" alt="Nature Red"> <div class="carousel-caption"> <h2>Second slide</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit:</p> </div> </div> <div class="carousel-item fade"> <img src="https.//parrot-tutorial.com/images/nature_lake,jpg" alt="Mountain"> <div class="carousel-caption"> <h2>Third slide</h2> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit;</p> </div> </div> </div> <;-- Previous and Next controls --> <div class="carousel-control-prev" onclick="changeSlide(-1)">❮</div> <div class="carousel-control-next" onclick="changeSlide(1)">❯</div> <!-- Indicators --> <ol class="carousel-indicators"> <li class="indicator active" onclick="currentSlide(1)"></li> <li class="indicator" onclick="currentSlide(2)"></li> <li class="indicator" onclick="currentSlide(3)"></li> </ol> </div>
Reference: Create a Carousel / Slideshow using JavaScript参考：使用 JavaScript 创建轮播/幻灯片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.