javascript - 如何在js中使图像成为一个简单的 slider

Question

我只懂html、js和css。我试图让图像每隔几秒钟改变一次，就像幻灯片一样。

    <script type="text/javascript">
        var temp=1;
        function slider(){
            document.getElementById("pic1").style.display = 'none';
            document.getElementById("pic2").style.display = 'none';
            document.getElementById("pic3").style.display = 'none';
            if(temp==1){
                document.getElementById("pic1").style.display = 'block';
            }
            else if(temp==2){
                document.getElementById("pic2").style.display = 'block';
            }
            else if (temp==3){
                document.getElementById("pic3").style.display = 'block';
                temp=1;
            }
            temp++;
            setTimeout(slider(),25000);
        }
    </script>

头在上， body 在下。

    <div id="rightside" onload="slider()">
        <a id="pic1"><img src="photos/hamilton/candyshop.jpg" style="display:block"></a>
        <a id="pic2"><img src="photos/hamilton/hamiltonboat.jpg" style="display:none"></a>
        <a id="pic3"><img src="photos/hamilton/waterduel.jpg" style="display:none"></a>
    </div>

Answer 1

其中存在多个错误，必须全部修复才能使其正常工作。

• 在线setTimeout(slider(), 25000) ，你应该通过slider ，函数本身，而不是 slider() ，函数的返回值。那么您需要调用slider()定义它后一次即可开始整个事情。您可以在 JavaScript 中使用 document.addEventListener 执行此操作而不是带有 onload 的 HTML ，使 HTML 自包含。
• 您设置了img至display:none在 HTML 中，然后设置 ID 为 pic1 的元素至display: block 。但这个元素不是 img ，这是 a 。所以你最终得到 display: block <a>包含display: none <img> ，所以什么也没显示。
• 当您设置temp = 1时，之后立即运行 temp++ ，因此图片 #1 再也不会出现。 temp = 0在那一行可以解决这个问题，但最好是 temp循环“0, 1, 2”并使用模运算符 %如果数字太高，就会导致循环。

我还添加了alt描述每个图像的属性，以便演示无需加载图像即可运行。如果您的用户由于某种原因看不到图像，这也会对他们有所帮助。

工作版本:

document.addEventListener("DOMContentLoaded", function(event) {
  var temp = 0;

  function slider() {
    document.getElementById("pic1").style.display = 'none';
    document.getElementById("pic2").style.display = 'none';
    document.getElementById("pic3").style.display = 'none';
    if (temp == 0) {
      document.getElementById("pic1").style.display = 'block';
    } else if (temp == 1) {
      document.getElementById("pic2").style.display = 'block';
    } else if (temp == 2) {
      document.getElementById("pic3").style.display = 'block';
    }
    temp = (temp + 1) % 3;
    setTimeout(slider, 1500); // decreased delay for demo purposes
  }

  slider();
});

<div id="rightside">
  <a id="pic1" style="display:block">
    <img alt="candy shop" src="photos/hamilton/candyshop.jpg">
  </a>
  <a id="pic2" style="display:none">
    <img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
  </a>
  <a id="pic3" style="display:none">
    <img alt="water duel" src="photos/hamilton/waterduel.jpg">
  </a>
</div>

让代码像上面一样工作后，您还可以通过使用循环和函数来减少重复。在以下版本中，如果添加更多图片，您只需要更改一行代码，而不是复制粘贴多部分代码。将代码拆分为每个简单的函数还有一个额外的好处，即代码更容易理解并检查其中的错误。

document.addEventListener("DOMContentLoaded", function(event) {
  var currentIndex = 0;
  var numPictures = 3;

  function slideshow() {
    hideAllPictures();
    showPicture(currentIndex);

    currentIndex = (currentIndex + 1) % numPictures;
    setTimeout(slideshow, 1500);
  }

  function hideAllPictures() {
    for (var i = 0; i < numPictures; i++) {
      hidePicture(i);
    }
  }

  function hidePicture(index) {
    getPictureElement(index).style.display = 'none';
  }
  function showPicture(index) {
    getPictureElement(index).style.display = 'block';
  }

  function getPictureElement(index) {
    var id = "pic" + (index + 1);
    return document.getElementById(id);
  }

  slideshow();
});

<div id="rightside">
  <a id="pic1" style="display:block">
    <img alt="candy shop" src="photos/hamilton/candyshop.jpg">
  </a>
  <a id="pic2" style="display:none">
    <img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
  </a>
  <a id="pic3" style="display:none">
    <img alt="water duel" src="photos/hamilton/waterduel.jpg">
  </a>
</div>