[英]How can I create a timed slideshow with HTML/CSS and Javascript
我想使用我现有的代码创建定时幻灯片并添加 javascript 来切换图像。 我想要三张照片每 3 秒交替一次。 我只想更改照片，而不是文本 header。我附上了我的 HTML 和 CSS 代码。
#headercontainer{ width: 100vw; height:90vh; background-color: #A64253; }.head{ width: 100%; height: 100%; object-fit: cover; }.headertxt{ position: absolute; top: 40%; margin: auto; width: 100%; font-size: 8.5vw; text-align: center; color: #17255A; } #arrow{ font-size: 6vw; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <div id="headercontainer"> <img class="head" src="https.//th.bing.com/th/id/R?10d3bd1edd810efb3ae8e0974e394445?rik=fIvZv9wkgyrIeQ&pid=ImgRaw&r=0" alt=""> <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p></h1> </div> </body> </html>
`
setInterval()和setTimeout()是制作定时器时非常方便的工具。 在您的情况下，您希望序列继续进行，因此setInterval()是最佳选择。
要使用setInterval()制作序列，您可以执行以下操作：
setInterval(function(){ console.log("Hello"); }, 3000);
如果您打开控制台，每隔几秒就会看到“Hello”。
因此，要在您的代码中使用这个很棒的功能，您可以使用此示例：
setInterval(function(){
let images = ["path/to/first/image", "path/to/second/image", "path/to/third/image"];
let imageNumber = 0;
let image = images[imageNumber];
document.querySelector(".head").src = image;
imageNumber++;
if (imageNumber >= 3) {
imageNumber = 0;
}
}, 3000);
希望它能帮助你。
body { margin: 0; } #headercontainer { width: 100vw; height: 90vh; background-color: #A64253; position: relative; }.head { width: 100%; height: 100%; object-fit: cover; }.headertxt { position: absolute; top: 40%; margin: auto; width: 100%; font-size: 8.5vw; text-align: center; color: #17255A; z-index: 1; } #arrow { font-size: 6vw; }.head1 { position: relative; animation: head1 9s linear infinite; }.head2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: head2 9s linear infinite; }.head3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: head3 9s linear infinite; } @keyframes head1 { 0% { opacity: 1; } 22.222222% { opacity: 1; } 33.333333% { opacity: 0; } 88.888888% { opacity: 0; } 100% { opacity: 1; } } @keyframes head2 { 0% { opacity: 0; } 22.222222% { opacity: 0; } 33.333333% { opacity: 1; } 55.555555% { opacity: 1; } 66.666666% { opacity: 0; } 100% { opacity: 0; } } @keyframes head3 { 0% { opacity: 0; } 55.555555% { opacity: 0; } 66.666666% { opacity: 1; } 88.888888% { opacity: 1; } 100% { opacity: 0; } }
<div id="headercontainer"> <img class="head head1" src="https://www.w3schools.com/css/img_5terre.jpg" alt=""> <img class="head head2" src="https://www.w3schools.com/css/img_forest.jpg" alt=""> <img class="head head3" src="https://www.w3schools.com/css/img_lights.jpg" alt=""> <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p> </h1> </div>
您可以简单地使用图像数组运行setInterval function 只需将此 JS 代码注入您的代码即可获得结果
const headerImg = document.querySelector('.head')
const UPDATE_TIME_INTERVAL = 3000
// Enter URLs of your own custom images
const imagesArray = [
"https://unsplash.it/500",
"https://unsplash.it/501",
"https://unsplash.it/502",
]
let i = 0
setInterval(()=>{
if(i == 2){
i = 0
}
else {i = i + 1};
console.log('i was run',i)
headerImg.src = imagesArray[i]
},UPDATE_TIME_INTERVAL)
如何使用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?
我如何使用 HTML、CSS 和 JavaScript 创建此 FORM 功能
[英]How can i create this FORM functionality using HTML, CSS & JavaScript
如何仅在悬停幻灯片 html css javascript 时显示箭头
[英]how to show arrow only when hover slideshow html css javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.