Question

我做了这个幻灯片放映，但是当图像有时会发生变化时会出现延迟。图像应该每两秒更换一次，但是当我有时观看幻灯片的行为时，图像需要4秒才能更改为另一个不同的图像。我该怎么解决这个问题呢？

<script type="text/javascript">

    var gallery = new Array("", "images/slide-show/company-image1.jpg", "images/slide-show/company-image2.jpg",
    "images/slide-show/company-image3.jpg", "images/slide-show/company-image4.jpg");

    var slideControl = gallery.length-1;

    var randomNumber = Math.ceil(Math.random()*slideControl);

    function slideShow(){

        var i;

        var randomControl;

        for(i=0; i<randomNumber; i++){

            randomControl = Math.ceil(Math.random()*slideControl);
        }

        document.getElementById("holder").src= gallery[randomControl];

        setTimeout("slideShow()",2000);
    }

</script>

Answer 1

您的代码有可能滑动到已经存在的相同图像。因此，即使您已经在2，您的随机数生成器也会选择2。更新您的逻辑，使其无法重复已经存在的数字。

Answer 2

您如何看待这一点：http://jsfiddle.net/chriscoyier/JTvVn/

用于HTML

<div id="slideshow">
   <div>
      <img src="images/slide-show/company-image1.jpg">
      </div>
      <div>
      <img src="images/slide-show/company-image2.jpg">
      </div>
      <div>
      <img src="images/slide-show/company-image3.jpg">
      </div>
</div>

用于Javascript

 $("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2000);

和一些CSS

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

在javascript中幻灯片

2 个答案: