如何在javascript和html中每5秒更改一次文本和图像

嘿，我写了一个JavaScript代码，我设法每隔几秒钟就更改一次图像，但文本与图像一起更改，但没有显示正确的文本。这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
img{
height: 500px;
width: 450px;
}
h1{
color: darkgreen;
margin-top: 20px;
font-family: Comic Sans MS, cursive, sans-serif;
}
.button{
margin-left: 45%;
}
</style>
<script>

function changeImage() {
var img = document.getElementById("img");
img.src = images[x];
x++;        
if(x >= images.length) {
x = 0;
} 
setTimeout("changeImage()", 6000);
}

function changeText() {
var txt= document.getElementById("message");
txt.textContent = text[y];
y++;
if(y>= text.length){
y = 0;
}
setTimeout("changeText()", 6000);

}


var text = [], y=0;
text[0] = "MSG1";
text[1] = "MSG2";
text[1] = "MSG3";
setTimeout("changeText()", 6000);
var images = [], x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 6000);
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 id="message">
Hello
</h1>
<img  id="img"
src="image1.jpg"  >
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>

有什么有效的方法可以做到这一点吗？我的目标是在一个html网页上制作3-5个图像，每隔几秒钟就会在彼此之间变化，每个图像上方都有不同的文本

将两个函数合并为一个函数，这样两件事就可以同时发生：

<script>
function changeImageAndText() {
var img = document.getElementById("img");
img.src = images[x];
var txt = document.getElementById("message");
txt.textContent = text[x];
x++;
if (x >= images.length) {
x = 0;
}
setTimeout("changeImageAndText()", 6000);
}
var text = [],
images = [],
x = 0;
text[0] = "MSG1";
text[1] = "MSG2";
text[2] = "MSG3";
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImageAndText()", 6000);
</script>

不用维护两个数组，而是使用一个对象数组，每个对象都包含图像和文本信息。然后，您可以同时创建包含两组信息的标记，而不是依赖于两个函数。

这个工作示例使用来自dummyimage.com的图像。

const data = [
{ image: 'https://dummyimage.com/100x100/666/ff0', text: 'Image 1' },
{ image: 'https://dummyimage.com/100x100/222/ff0', text: 'Image 2' },
{ image: 'https://dummyimage.com/100x100/fff/000', text: 'Image 3' },
{ image: 'https://dummyimage.com/100x100/a45/000', text: 'Image 4' },
];
// Cache the element
const div = document.querySelector('div');
// `carousel` is the main function into which we
// pass the data
function carousel(data) {
// `loop` is what `setTimeout` calls every second
// We initialise `count` to 0
function loop(count = 0) {
// Create the HTML using a template string
const html = `
<figure>
<img src="${data[count].image}" />
<figcaption>${data[count].text}</figcaption>
</figure>`;

// Add the markup to the div
div.innerHTML = html;
// Reset the count if we've reached the
// end of the array, otherwise increment it
if (count === data.length - 1) {
count = 0;
} else {
++count;
}

// Call `loop` every second with the
// updated `count` variable
setTimeout(loop, 1000, count);

}

loop();
}
carousel(data);

<div></div>

附加信息

模板/字符串文字
querySelectorAll
figure

就时间而言，您的代码基本上是好的——间隔长达6秒，如果一个超时发生在另一个超时后一微秒，您不会注意到。

您的问题是一个简单的错误。文本[1]重复，因此MSG2永远不会显示。

这是您的代码片段，只做了更改，效果非常好。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<style>
img {
height: 500px;
width: 450px;
}

h1 {
color: darkgreen;
margin-top: 20px;
font-family: Comic Sans MS, cursive, sans-serif;
}

.button {
margin-left: 45%;
}
</style>
<script>
function changeImage() {
var img = document.getElementById("img");
img.src = images[x];
x++;
if (x >= images.length) {
x = 0;
}
setTimeout("changeImage()", 6000);
}
function changeText() {
var txt = document.getElementById("message");
txt.textContent = text[y];
y++;
if (y >= text.length) {
y = 0;
}
setTimeout("changeText()", 6000);
}

var text = [],
y = 0;
text[0] = "MSG1";
text[1] = "MSG2";
text[2] = "MSG3";
setTimeout("changeText()", 6000);
var images = [],
x = 0;
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
setTimeout("changeImage()", 6000);
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1 id="message">
Hello
</h1>
<img id="img" src="image1.jpg">
</div>
<div class="col-md-3"></div>
</div>
</div>
</body>
</html>

然而，你提到了效率，而且在如此长的时间间隔内，这可能不会有太大的区别，因为JS只每6秒调用一次，但如果你想制作更高效的代码，那么可以考虑放弃JS，转而使用CSS动画-届时浏览器将有机会使用GPU。

我的做法是：

const text = ["MSG1", "MSG2", "MSG3"];
const image = ["image1.jpg", "image2.jpg", "image3.jpg"];
const imageObj = document.GetElementById("img");
const textObj = document.GetElementById("message");
let counter = 0;
function ChangeImage() {
if (counter == text.length) { 
counter = 0;
}
textObj.innerText = text[counter];
imageObj.src = image[counter];
counter++;
}
setInterval(ChangeImage, 3000); // 3000 = 3 Seconds, 5000 = 5 seconds.

要记住的主要事情是减少重复自己的次数，当循环通过一个数组时(当指针总是相同时(使用相同的变量(在这种情况下是计数器(

相关内容

最新更新

热门标签：