首页 / 技术问答 / Javascript问答列表 / 问答详情

在Javascript中每5秒交换一次多维数组

我已经制作了两个多维数组，用于数据插入，我希望在打开页面时显示第一个数组，然后每5秒交换两个array.

它们都显示了3张图片，下面有一些信息，我希望第一张出现，5秒后消失，第二张出现，5秒后再次出现，就像一个循环.有什么 idea 吗？

<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>

推荐答案

下面介绍的是实现预期目标的一种可能方法.

Code Snippet

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>

Explanation

添加到上述代码段的内联注释.

Javascript相关问答推荐

使用print This时， map 容器已在LeafletJS中初始化

可以的.是否可以在不预编译的情况下使用嵌套 Select 器？

我开始使用/url？q=使用Cheerio

仅针对RTK查询中的未经授权的错误取消maxRetries

函数返回与输入对象具有相同键的对象

在grafana情节，避免冲突的情节和传说

未捕获错误：[]：getActivePinia()被调用，但没有活动Pinia.🍍""在调用app.use(pinia)之前，您是否try 使用store ？""

分层树视图

在带有背景图像和圆形的div中添加长方体阴影时的重影线

在react JS中映射数组对象的嵌套数据

ChartJs未呈现

如何在不影响隐式类型的情况下将类型分配给对象？

令牌JWT未过期

react -原生向量-图标笔划宽度

使用线性插值法旋转直线以查看鼠标会导致 skip

输入的值的类型脚本array.排序()

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

React数组查找不读取变量

更改管线时不渲染组件的react

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630