我已經制作了 2 個多維陣列來推動資料插入，我希望在打開頁面時顯示第一個陣列，然后每 5 秒交換一次它們中的 2 個。
他們都顯示了3張圖片，下面有一些資訊，我希望第一張出現，5秒后消失，第二張出現，5秒后再次出現，就像一個回圈。有任何想法嗎？
<html>
<head>
<title>Galerija</title>
<style>
#container {
position: relative;
display: grid;
align-content: center;
padding-left: 210px;
flex-direction: column;
height: 98vh;
width: 98vw;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 6vh;
}
img {
height: 600px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script>
let container = document.querySelector("#container");
let slikeniz = [];
let slikeniz2 = [];
function slike(slika, brslike, autor, cena) {
this.slika = slika;
this.brslike = brslike;
this.autor = autor;
this.cena = cena;
};
slikeniz.push(new slike("https://i.pinimg.com/736x/90/7f/f7/907ff7b31d7de2f5430cfee79ded14d2.jpg", "slika1", "nekitamo", "200e"));
slikeniz.push(new slike("https://archziner.com/wp-content/uploads/2020/01/abstract-painting-ideas-woman-with-hair-in-a-bun-dancing-flamenco-with-lon-red-skirt-blue-top.jpg", "slika2", "nekitamo2", "500e"));
slikeniz.push(new slike("https://s3.amazonaws.com/showflipper/product/69601536314088.jpg", "slika3", "nekitamo3", "1000e"));
slikeniz.forEach(t => {
container.innerHTML = "<div class = 'item'><img src = " t.slika ">"
"<h1>" t.brslike " " t.autor "</h1>"
"<h2>" t.cena "</h2>"
"</div>"
});
//----------------------------------------------------------------------------------
function slike2(slika2, brslike2, autor2, cena2) {
this.slika2 = slika2;
this.brslike2 = brslike2;
this.autor2 = autor2;
this.cena2 = cena2;
};
slikeniz2.push(new slike2("https://3.imimg.com/data3/VO/EN/MY-787774/power-of-nature-500x500.jpg", "slika1", "nekitamo", "400e"));
slikeniz2.push(new slike2("https://cdna.artstation.com/p/assets/images/images/030/002/140/large/tara-pogancev-lake2.jpg?1599291124&dl=1", "slika2", "nekitamo2", "1500e"));
slikeniz2.push(new slike2("https://joanabrown.art/wp-content/uploads/2019/11/sierra_h_waitingongod-book_post-img-445x555.jpg", "slika3", "nekitamo3", "1300e"));
slikeniz2.forEach(t => {
container.innerHTML = "<div class = 'item'><img src = " t.slika2 ">"
"<h1>" t.brslike2 " " t.autor2 "</h1>"
"<h2>" t.cena2 "</h2>"
"</div>"
});
</script>
</body>
</html>uj5u.com熱心網友回復：
下面介紹的是實作預期目標的一種可能方式。
代碼片段
let container = document.querySelector("#container");
let slikeniz = [];
let slikeniz2 = [];
let showNow = 1, counter = 0; // flag to toggle, counter to stop
const threshold = 50; // stop after 50 toggles, for demo
function slike(slika, brslike, autor, cena) {
this.slika = slika;
this.brslike = brslike;
this.autor = autor;
this.cena = cena;
};
slikeniz.push(new slike("https://i.pinimg.com/736x/90/7f/f7/907ff7b31d7de2f5430cfee79ded14d2.jpg", "slika1", "nekitamo", "200e"));
slikeniz.push(new slike("https://archziner.com/wp-content/uploads/2020/01/abstract-painting-ideas-woman-with-hair-in-a-bun-dancing-flamenco-with-lon-red-skirt-blue-top.jpg", "slika2", "nekitamo2", "500e"));
slikeniz.push(new slike("https://s3.amazonaws.com/showflipper/product/69601536314088.jpg", "slika3", "nekitamo3", "1000e"));
// method to render the first set of images
const show1 = () => (
container.innerHTML = '',
slikeniz.forEach(t => {
container.innerHTML = "<div class = 'item'><img src = " t.slika ">"
"<h1>" t.brslike " " t.autor "</h1>"
"<h2>" t.cena "</h2>"
"</div>"
})
);
//----------------------------------------------------------------------------------
function slike2(slika2, brslike2, autor2, cena2) {
this.slika2 = slika2;
this.brslike2 = brslike2;
this.autor2 = autor2;
this.cena2 = cena2;
};
slikeniz2.push(new slike2("https://3.imimg.com/data3/VO/EN/MY-787774/power-of-nature-500x500.jpg", "slika1", "nekitamo", "400e"));
slikeniz2.push(new slike2("https://cdna.artstation.com/p/assets/images/images/030/002/140/large/tara-pogancev-lake2.jpg?1599291124&dl=1", "slika2", "nekitamo2", "1500e"));
slikeniz2.push(new slike2("https://joanabrown.art/wp-content/uploads/2019/11/sierra_h_waitingongod-book_post-img-445x555.jpg", "slika3", "nekitamo3", "1300e"));
// method to render the first set of images
const show2 = () => (
container.innerHTML = '',
slikeniz2.forEach(t => {
container.innerHTML = "<div class = 'item'><img src = " t.slika2 ">"
"<h1>" t.brslike2 " " t.autor2 "</h1>"
"<h2>" t.cena2 "</h2>"
"</div>"
})
);
// method to toggle between the two sets
const toggleSlikeniz = () => {
const id = setTimeout(() => {
if (showNow === 1) {
// if flag says to show images in set-1
// toggle the flag & invoke "show1()"
showNow = 2;
show1();
} else {
// else (flag says 2, so) show images in set-2
// toggle the flag & invoke "show2()"
showNow = 1;
show2();
};
// a sanity-checking for demo only
// stop recursive call if counter >= threshold (ie, 50)
if (counter < threshold) toggleSlikeniz();
}, 3500);
// clear the timeout
return () => clearTimeout(id);
};
// invoke the toggle method to begin rendering
toggleSlikeniz();<html>
<head>
<title>Galerija</title>
<style>
#container {
position: relative;
display: grid;
align-content: center;
padding-left: 210px;
flex-direction: column;
height: 98vh;
width: 98vw;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 6vh;
}
img {
height: 600px;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>解釋
添加到上述代碼段的行內注釋。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/469307.html
標籤：javascript