[英]How can I make an image carousel using HTML5, CSS and Javascript?
當我運行文件時，我只能看到第一張圖片，但在 slideInterval 時間后它不會改變。
我認為問題出在 Javascript 代碼中，因為該項目的 HTML 和 CSS 部分應該做的所有事情都已經完成了。 但是，圖像不會改變。
我對 Javascript 有點菜鳥，所以請指出任何問題，即使它很明顯。 預先感謝！
這是我的代碼：
首先是 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>
使用可以使用 jssor 滑塊插件來創建響應式輪播。 參考https://www.jssor.com/
您的startPlayback()函數僅在加載腳本時觸發一次。 在您創建的函數的第二行startPlayback()中，讓它在slideInterval延遲后再次調用自身，以便您創建一個無休止的循環。 我還會在沒有setTimeout的情況下使該函數的第一行觸發，並在第一次調用startPlayback()函數時使用setTimeout觸發。
例如：
function startPlayback() {
nextImage();
window.setTimeout(startPlayback(), slideInterval);
}
window.setTimeout(startPlayback(), slideInterval);
我建議使用 Bootstrap 來制作一個漂亮且響應迅速的輪播。
您還將您定義的function ( nextImage() ) 傳遞給setTimeout()方法，而不是包含匿名函數的變量，因此在該參數中包含“()”。 如果您使用 W3Schools 示例作為參考，它們將以變量的形式傳遞匿名函數，這就是它們不包含“()”的原因。 由於您傳遞的是函數，因此添加“()”。 在您的情況下，變量nextImage未定義，但函數nextImage()已定義。
試試這個
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>
如何使用CSS3 / HTML5或Javascript創建基於div位置顯示圖像縮放部分的縮放“窗口”？
[英]How can I create zoom 'windows' showing a zoomed portion of an image based on a div location using CSS3/HTML5 or Javascript?
如何使用HTML，CSS和Javascript制作幻燈片顯示，以在iPhone的圖像上顯示應用程序的圖像？
[英]How can I make a slideshow using HTML, CSS, and Javascript displaying an app's images on an image of an iPhone?
如何使用javascript或html為我的網站制作一個跨瀏覽器友好的文本輪播？
[英]How can I make a text carousel for my site cross browser friendly by using javascript or html?
如何使用 HTML5 畫布和 JavaScript 裁剪圖像以便離線裁剪圖像？
[英]How can i crop image using the HTML5 canvas and JavaScript in order to crop an image offline?
如何使用引導程序 4 使 Javascript 用於輪播？
[英]How can i make the Javascript work for a Carousel by using bootstrap 4?
我不是Java語言專家..如何使Jquery Carousel的圖像幻燈片一張一張地滑動？
[英]I'm Not a Javascript Expert .. How Can I Make a Jquery Carousel's Image Slide One By One?
如何使用 HTML5、CSS3、Javascript/Jquery 單擊此導航欄跟蹤項？
[英]How do I make this navigation bar track item clicked with HTML5, CSS3, Javascript/Jquery?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.