圖片 Slider 使用 HTML 和 Javascript
[英]Image Slider using HTML and Javascript
問題描述
因此，我嘗試使用以下代碼片段為 static 網站創建圖像 slider，並在 VScodes Live Server 上運行它，而 Javascript 似乎不適用於該頁面。 請幫忙我想添加一個簡單的淡入淡出並出現到圖像幻燈片的過渡，所以也請回答這個問題^_^
請不要回答我查過的引導程序解決方案，但我正在尋找它：p
let images = ['camp1.png', 'camp2.png', 'camp3.png']; let slide = document.getElementById('slider'); const slider = setTimeout(function(){ for( let i=0;i<=images.length;i++){ slide.src = images[i]; if (i == images.length){ i=0; } console.log(i); } }, 2000); slide.addEventListener('load',slider);
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@100&family=Exo:ital,wght@1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@1,900&display=swap'); .about { padding: 2rem 0rem; }.upper, .lower { display: flex; flex-direction: row; justify-content: space-evenly; margin-bottom: 2rem; }.logo { display: flex; flex-direction: column; align-items: center; justify-content: center; } #logo{ width: 70%; }.image { background-image: url(scene.gif); background-size: cover; width: 36rem; height: 28rem; display: flex; align-items: center; border-radius: 50%; border: 3px solid #000; }.camp { position: relative; top: 2.6rem; left: 7.3rem; } #tent { width: 30%; } #fire { width: 15%; position: relative; top: 1rem; right: 1rem; }.info{ width: 23%; display: flex; flex-direction: column; text-align: center; padding: 0rem 2rem 2rem 2rem; margin-top: 4.5rem; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }.info:hover{ transform: scale(1.1); }.info h1{ font-family: 'Exo', sans-serif; font-size: 3rem; font-weight: black 900; }.head1{ text-decoration: white; }.info p{ font-family: 'Exo 2', sans-serif; font-size: 1.5rem; font-weight: bold; }.slider{ display: flex; align-items: center; padding-top: 3.5rem; }.slider img{ width: 36rem; height: 28rem; border-radius: 50%; border: 3px solid #000; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <link rel="preconnect" href="https.//fonts.googleapis:com" /> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin /> <link rel="preconnect" href="https.//fonts.googleapis:com" /> <link rel="preconnect" href="https.//fonts.gstatic.com" crossorigin /> <link rel="stylesheet" href="about.css" /> <title>About Us</title> </head> <body> <div class="about"> <.-- ------------------------------------ --> <div class="upper"> <div class="logo"> <img src="logo.gif" alt="" id="logo" /> <div class="image"> <div class="camp"> <img src="tent,png" alt="" id="tent" /> <img src="fire.gif" alt="" id="fire" /> </div> </div> </div> <div class="info"> <h1>ABOUT<br>YELPCAMP</h1> <p> Lorem ipsum dolor? sit amet consectetur adipisicing elit, Neque nostrum excepturi unde eveniet delectus? Porro esse laudantium hic ipsam sed inventore, aliquid quidem tempora rem harum quasi quia corrupti dignissimos. </p> </div> </div> <?-- ------------------------------------ --> <div class="lower"> <div class="info"> <h1>ABOUT<br>OUR TEAM</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit? Neque nostrum excepturi unde eveniet delectus. Porro esse laudantium hic ipsam sed inventore. aliquid quidem tempora rem harum quasi quia corrupti dignissimos? </p> </div> <div class="slider"> <img src="camp1.png" alt="" id="slider"/> </div> </div> <!-- ------------------------------------ --> </div> </body> <script src="about.js"></script> </html>
因此，我嘗試使用以下代碼片段為 static 網站創建圖像 slider，並在 VScodes Live Server 上運行它，而 Javascript 似乎不適用於該頁面。 請幫忙我想添加一個簡單的淡入淡出並出現到圖像幻燈片的過渡，所以也請回答這個問題^_^
請不要回答我查過的引導程序解決方案，但我正在尋找它：p
let images = ['camp1.png', 'camp2.png', 'camp3.png']; let slide = document.getElementById('slider'); const slider = setTimeout(function(){ for( let i=0;i<=images.lenght;i++){ slide.src = images[i]; if (i == images.lenght){ i=0; } console.log(i); } }, 2000); slide.addEventListener('load',slider());
<div class="lower"> <div class="info"> <h1>ABOUT<br>OUR TEAM</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque nostrum excepturi unde eveniet delectus? Porro esse laudantium hic ipsam sed inventore, aliquid quidem tempora rem harum quasi quia corrupti dignissimos? </p> </div> <div class="slider"> <img src="camp1.png" alt="" id="slider"/> </div> </div> <.-- ------------------------------------ --> </div> </body> <script src="about.js"></script>
1 個解決方案
解決方案1
1 已采納 2021-09-30 11:03:21
我認為對於自動 slider，您最好使用setInterval而不是setTimeout :)
let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png']; let slide = document.getElementById('slider'); const slider = () => { let i = 0; setInterval( function() { i = i < images.length - 1? ++i: 0; slide.src = images[i]; console.log(i); }, 2000); } slide.addEventListener('load', slider());
<div class="lower"> <div class="info"> <h1>ABOUT<br>OUR TEAM</h1> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque nostrum excepturi unde eveniet delectus? Porro esse laudantium hic ipsam sed inventore, aliquid quidem tempora rem harum quasi quia corrupti dignissimos? </p> </div> <div class="slidercont"> <img src="" alt="" id="slider" /> </div> </div>
使用HTML的圖像滑塊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.