Question

我需要使用javascript setinterval函数逐个显示三张图片你能不能请任何人帮助我。

Bellow是我的HTML代码。

<div class="imageHolder">
<img src="http://lorempixel.com/400/200/sports/" style="display:none;" class="image1" border="0" />
<img src="http://lorempixel.com/400/200/sports/1" style="display:none;" class="image2" border="0" />
<img src="http://lorempixel.com/400/200/" style="display:none;" class="image3" border="0" />
</div>

Answer 1

<head>
  <script type="text/javascript">
  function start() {
    var images = document.querySelectorAll('.imageHolder img');
    var images_count = images.length;
    var image_index = false;
    var delay = 3000; // 3 seconds delay

    function animateImageHolder() {
      if (false !== image_index) {
        images[image_index].style = 'display:none';
        image_index++;
        image_index = (image_index < images_count ? image_index : 0);
      } else {
        image_index = 0;
      }
      images[image_index].style = 'display:inline';
    }

    animateImageHolder();
    setInterval(animateImageHolder, delay);
  }
  </script>
</head>
<body onload="start()">
<!-- ... -->

Answer 2

这个问题非常像＆＃34;为我做我的工作＆＃34;但你的英语很诚实。您没有说每个图像应该显示多长时间，因此我将其设置为3秒（interval = 3000）。我建议您将第一张图片的样式属性设置为style="display:block"，将其余图片属性设置为style="display:none"。

function slider(element) {
    var next_image = 0
      , interval = 3000
      , images = Array.prototype.filter.call(element.children, function(child) {
            return child.tagName === "IMG";
        })
    ;
    setInterval(function() {
        images.forEach(function(image, i) {
            image.style.display = i === next_image ? "block" : "none";
        })
        next_image = (next_image + 1) % images.length;
    }, interval);
}

slider(document.querySelector("div.imageHolder"))

javascript setinterval使用if条件显示图像

2 个答案: