时间戳

首页 > 解决方案 > 如何用图像制作轮播？

javascript - 如何用图像制作轮播？

问题描述

对于网页设计课程中的大型项目，我必须创建一个轮播，每十秒在图像之间移动一次。

我们在课堂上做了一个示例，可以在 10 个不同的单词之间进行更改，但我似乎无法添加图片并使其正常工作。

我只是想知道是否有人可以帮助我完成我似乎无法掌握的这部分作业。

这是我到目前为止所拥有的：

<head>
  <title>JS Examples: Arrays</title>
  <script>
    function showImages(id) {
      var images = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6', 'img7', 'img8', 'img9', 'img10'];
      document.getElementById('image').innerHTML = images[id];
      console.log('Position:' + id + ' image:' + images[id]);
      if (id < images.length - 1) {
        id = id + 1;
      } else {
        id = 0;
      }
      setTimeout(showImages, 10000, id);
    }
  </script>
</head>

<body onload="showImages(0)">
  <article>
    <p id="image">Showing Images</p>
  </article>
</body>

标签： javascriptarrayscarousel

解决方案

推荐阅读