HTML 中的图片幻灯片

Question

我正在尝试使用 links 而不是保存在我计算机上的照片来制作照片幻灯片。共有 19 张照片，照片 link 仅最后一位数字不同：例如，

一号照片有 link 个“://www.g.com/photo01.jpg”
照片二 link of "://www.g.com/photo02.jpg"

我一直在处理这段代码，但是当我想移动到下一张图片时，没有任何变化，当我想单击上一张按钮时，主图像消失了。

<body>
<div class = "main">
  <button id = "prev" class = "bot" onclick = "prev()"><</button>
  <img class = "imgSub" src = "https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = "">
  <button id = "next" class = "bot" onclick = "next()">></button>
</div>
<script>
  var count;
  let mainElement = document.querySelector("div.main>.imgSub");
  let URL = "https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_";

  function next() {
    if (count < 19) {
      if (count < 10) {
        count++;
        URL = URL + "0" + count + ".jpg";
      } else {
        count++;
        URL = URL + count + ".jpg";
      }
    } else {
      count = 1;
      URL = URL + "0" + count + ".jpg";
    }
    mainElement.setAttribute('src', URL);
  }

  function prev() {
    if (count > 1) {
      if (count < 10) {
        count--;
        URL = URL + "0" + count + ".jpg";
      } else {
        count--;
        URL = URL + count + ".jpg";
      }
    } else if (count == 1){
      count = 19;
      URL = URL + count + ".jpg";
    } else {
      URL = URL + "01.jpg";
    }
    mainElement.setAttribute('src', URL);
  }
</script>

Answer 1

如果你用bootstrap做图片滑动，你也会容易理解很多。即使您没有足够的知识，您也可以简单地访问 getbootstrap.com，然后从那里您可以将 bootstrap 的基本样板文件复制到您的 html 文件中，并将所需的样板文件复制到 html 文件中图片轮播。

Answer 2

<body>
    <div class="main">
        <button id="prev" class="bot" onclick="prev()"><</button>
        <img id="imgSub" src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt="">
        <button id="next" class="bot" onclick="next()">></button>
    </div>
    <script>
        var count = 1;
        let mainElement = document.querySelector("div.main>.imgSub");
        let URL = "https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_";

        function next() {

            if (count < 19) {
                if (count < 10) {
                    count++;
                    x = URL + "0" + count + ".jpg"

                } else {
                    count++;
                    x = URL + count + ".jpg"
                }
            } else {
                count = 1;
                x = URL + "0" + count + ".jpg";
            }
            document.getElementById("imgSub").src = x;
        }

        function prev() {
            if (count > 1) {
                if (count < 10) {
                    count--;
                    x = URL + "0" + count + ".jpg"
                } else {
                    count--;
                    x = URL + count + ".jpg"
                }
            } else if (count == 1) {
                count = 19;
                x = URL + count + ".jpg";
            } else {
                x = URL + "01.jpg";
            }
            document.getElementById("imgSub").src = x;
        }
    </script>

HTML 中的图片幻灯片

Image Slideshow in HTML

html

photo

slider

slideshow

slide