|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
【實例】使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片
作者:admin 時間:2021-9-22 9:0:20 瀏覽:網(wǎng)絡(luò)幻燈片是一系列圖像或文本，在特定時間間隔內(nèi)按順序顯示一個元素。
在這篇教程中，你可以按照以下簡單步驟，使用 HTML、CSS 和 JavaScript 創(chuàng)建幻燈片。
寫一些標記文檔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slideshow-example" data-component="slideshow">
<div role="list">
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
</div>
</div>
<script src="slideshow.js"></script>
</body>
</html>
寫樣式來隱藏幻燈片，只顯示一張幻燈片
要隱藏幻燈片，你必須為其提供默認樣式。它將指明你僅顯示一張?zhí)幱诨顒訝顟B(tài)或想要顯示的幻燈片。
[data-component="slideshow"] .slide {
display: none;
}
[data-component="slideshow"] .slide.active {
display: block;
}每隔一定時間更換顯示幻燈片
更改顯示哪些幻燈片的第一步是選擇幻燈片包裝，然后選擇其幻燈片。
選擇幻燈片時，你必須瀏覽每張幻燈片，并根據(jù)要顯示的幻燈片添加或刪除活動的 class。然后，只需在一定時間間隔內(nèi)重復(fù)該過程即可。
請記住，從幻燈片刪除活動 class 時，由于上一步中定義的樣式，你是將其隱藏了。但是，當(dāng)你給幻燈片添加活動 class 時，你將覆蓋樣式 display:none 至 display:block，因此幻燈片將向用戶顯示。
var slideshows = document.querySelectorAll('[data-component="slideshow"]');
// Apply to all slideshows that you define with the markup wrote
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides
var index = 0, time = 5000;
slides[index].classList.add('active');
setInterval( () => {
slides[index].classList.remove('active');
//Go over each slide incrementing the index
index++;
// If you go over all slides, restart the index to show the first slide and start again
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
}上面代碼 time = 5000 是設(shè)置幻燈片間隔時間為5秒，我們可以根據(jù)需要修改此值。
標簽: 幻燈片
相關(guān)文章
x
- 站長推薦
