图片 Slider 使用 HTML 和 Javascript
[英]Image Slider using HTML and Javascript
问题描述
So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page.
因此，我尝试使用以下代码片段为 static 网站创建图像 slider，并在 VScodes Live Server 上运行它，而 Javascript 似乎不适用于该页面。 pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^请帮忙我想添加一个简单的淡入淡出并出现到图像幻灯片的过渡，所以也请回答这个问题^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for:p请不要回答我查过的引导程序解决方案，但我正在寻找它：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>
So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page.因此，我尝试使用以下代码片段为 static 网站创建图像 slider，并在 VScodes Live Server 上运行它，而 Javascript 似乎不适用于该页面。 pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^请帮忙我想添加一个简单的淡入淡出并出现到图像幻灯片的过渡，所以也请回答这个问题^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for:p请不要回答我查过的引导程序解决方案，但我正在寻找它：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
I think you'd better use setInterval than setTimeout for an automatic slider:)我认为对于自动 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.