HTML图片幻灯片

如何解决HTML图片幻灯片

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

第一张照片的链接为“：//www.g.com/photo0 1 .jpg”
第二张链接为“：//www.g.com/photo0 2 .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>

解决方法

如果您使用引导程序进行图像滑动，这对您也将非常容易并且可以理解。即使您没有足够的知识，也可以直接访问getbootstrap.com，然后从那里将bootstrap的基本样板复制到html文件中，并复制所需的图像轮播样板。

<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图片幻灯片

解决方法

相关推荐