1

我必须编写自己的几行代码，以便在我的网站启动页面上显示幻灯片。我无法使用任何插件，因为我在 HTML5 和 css3 上设计了网站，并且图像已同步以与浏览器一起调整大小。现在，进入实际问题，最后一张图像花费的时间是列表中每张图像的两倍。下面是粘贴的 HTML 和 javascript。

HTML

  <div id="backgrounds">
    <div class="bgs" style="z-index:1000;">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_nop.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:999; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_jkl.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:998; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_ghi.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:997; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_def.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:996; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_abc.jpg" alt="" class="background" /> 
    </div>
  </div>

JAVASCRIPT

    var count = 0;
    var repeatCount = 0;
    var backgrounds = $('.bgs').length;
    function startSlideShow() {
        myRecFunc = setInterval(function () {
            if (count == backgrounds) {
                $('.bgs').eq(0).stop(true, true).hide(1000, 'easeOutExpo');
                $('.bgs').eq(backgrounds - 1).show(1000, 'easeOutExpo');
            }
            if (count < backgrounds) {
                $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
                $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
                count++;
            }
            else {
                count = 0;
                repeatCount++;
            }
        }, 1000);
    }
    startSlideShow();

上面代码中的第一个 if() 是我添加的用于处理我在上面所说的情况的那个，在此先感谢您的帮助。

4

1 回答 1

2

你有一个条件，你在整个间隔内什么都不做，这是你的“其他”情况。尝试将检查移到内部，以便立即发生。

var count = 0;
var repeatCount = 0;
var backgrounds = $('.bgs').length;
function startSlideShow() {
    myRecFunc = setInterval(function () {
        $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
        $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
        count++;
        if (count === backgrounds) {
            count = 0;
            repeatCount++;
        }
    }, 1000);
}
startSlideShow();​
于 2012-08-14T20:07:08.080 回答