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>

头部在上方，身体在下方。

    <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()一次以启动整个事情。您可以使用document.addEventListener代替带有onload的HTML在JavaScript中执行此操作，从而使HTML自包含。
您在HTML中将img设置为display:none，然后将ID为pic1的元素设置为display: block。但是这个元素不是img，而是a。因此，您最终得到的display: block <a>包含display: none <img>，所以一切都没有显示。
当您设置temp = 1后，您立即运行temp++，因此再次看不到图片＃1。该行上的temp = 0可以解决这个问题，但最好让temp循环“0,1,2”并使用模数运算符%，如果它们也是数字循环高。

我还添加了描述每个图像的alt属性，因此演示可以在没有加载图像的情况下工作。如果他们因任何原因无法看到图片，这也会对您的用户有所帮助。

工作版本：

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Answer 2

使用纯Javascript和CSS尝试此操作，仅将myimage*.jpg更改为您的图片名称。

<!DOCTYPE html>
<html>
    <title>My Simple Slider</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .fading{
            -webkit-animation:fading 10s infinite;
            animation:fading 10s infinite
        }

        @-webkit-keyframes fading {
            0%{opacity:0}
            50%{opacity:1}
            100%{opacity:0
            }
        }

        @keyframes fading {
            0%{opacity:0}
            50%{opacity:1}
            100%{opacity:0
            }
        }
    </style>
    <body>

        <div>
            <p>Simple Image Carousel</p>

            <img class="mySlides fading" src="myimage1.jpg" style="width:100%">
            <img class="mySlides fading" src="myimage2.jpg" style="width:100%">
            <img class="mySlides fading" src="myimage3.jpg" style="width:100%">
            <img class="mySlides fading" src="myimage4.jpg" style="width:100%">

        </div>

        <script>
            var myIndex = 0;
            carousel();

            function carousel() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                myIndex++;
                if (myIndex > x.length) {
                    myIndex = 1
                }
                x[myIndex - 1].style.display = "block";
                setTimeout(carousel, 9000);
            }
        </script>

    </body>
</html>

如何在js

2 个答案: