HTML Javascript 幻灯片优化

HTML Javascript Slideshow Optimization

本文关键字：优化 幻灯片 Javascript HTML      更新时间：2023-09-26

我不得不编写自己的几行代码，以便在我的网站启动页面上显示幻灯片。我无法使用任何插件，因为我在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（） 是我添加的用于处理我在上面陈述的情况的那个，提前感谢您的帮助。

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

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();​
相关文章：