0

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

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

2 回答 2

0

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

于 2020-10-18T03:18:59.027 回答
0 
<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>
于 2020-10-18T04:25:19.497 回答