jQuery幻灯片没有正确循环答案

【问题标题】：jQuery Slideshow Not Looping CorrectlyjQuery幻灯片没有正确循环
【发布时间】：2013-05-28 20:45:20
【问题描述】：

我正在开发一个具有背景图像幻灯片的启动页面，我希望它不断循环播放，但现在它在闪烁并且循环不均匀。第一张图片也没有留在循环中：http://newmarketdvm.com/vsc/test/

这是代码。我已经在标题中嵌入了幻灯片代码，因为它是一个启动页面，我想知道这是否也会让它出现故障，但我似乎真的无法弄清楚图像类/这是否是它的问题。我只是设置错误还是需要修改 jQuery？

<?php
    /*
    Template Name: Splash Page
    */
?>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function slideSwitch() {
            var $active = $('#slideshow IMG.active');

            if ( $active.length == 0 ) 
                $active = $('#slideshow IMG:last');

            // use this to pull the images in the order they appear in the markup
            var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

            // uncomment the 3 lines below to pull the images in random order

            // var $sibs  = $active.siblings();
            // var rndNum = Math.floor(Math.random() * $sibs.length );
            // var $next  = $( $sibs[ rndNum ] );

            $active.addClass('last-active');

            $next.css({opacity: 0.0})
                .addClass('active')
                .animate({opacity: 1.0}, 2500, function() {
                    $active.removeClass('active last-active');
                }); 
        }

        $(function() {
            setInterval( "slideSwitch()", 2500 );
        });
    </script>

    <style type="text/css">
    #slideshow {
        position: fixed;
        z-index: 0;
    }
    #slideshow IMG {
        position: fixed;
        top: 0;
        left: 0;
        z-index: auto;
        opacity: 0.0;
    }
    #slideshow IMG.active {
        z-index: auto;
        opacity: 1.0;
    }
    #slideshow IMG.last-active {
        z-index: auto;
    }
    #slideshow img {
        min-height: 100%;
        min-width: 100%;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }
    .enter {
        background: url('http://newmarketdvm.com/vsc/wp-content/themes/mono/images/splash-nav.png');
        background-repeat: repeat-x;
        top: 85%;
        left: 0;
        position: absolute;
        z-index: 5000;
        width: 100%;
        height: 75px;
        display: block;
    }
    .enter p {
        font-size: 20px;
        font-weight: 300;
        line-height: 125%;
        color: #FFFFFF;
        font-family: Helvetica, Arial, sans-serif;
        z-index: auto;
        position: relative;
        padding-left: 50px;
        float: left;
    }
    .enter p a {
        text-decoration: none;
        color: #FFFFFF;
    }

    .enter p a:hover {
        color: #DDC997;
    }

    .enter p img {
        margin-top: -30px;
        position: relative;
    }

    @media screen and (max-width: 1024px) {
        img.bg {
            left: 50%;
            margin-left: -512px;
        }

    </style>
</head>

<body>
    <center>
        <div id="slideshow">
            <img class="active" src="http://newmarketdvm.com/vsc/wp-content/themes/mono/images/medicalteam.jpg" />
            <img class="active" src="http://newmarketdvm.com/vsc/wp-content/themes/mono/images/dog-running-grass.jpg" />
            <img class="last-active" src="http://newmarketdvm.com/vsc/wp-content/uploads/2013/04/Hans-treadmill-2.jpg" />
        </div>
    </center>
</body>

【问题讨论】：

标签： jquery slideshow jquery-slider

【解决方案1】：

这些图像似乎没有任何语义值，您是否考虑将它们包含为 background-image 代替？

因此，您只需添加以下 CSS 规则，而不是 <div id="slideshow">：

body {
    background-image: url(medicalteam.jpg);
    background-repeat: no-repeat; 
}

那么javascript应该是微不足道的。例如，您可以使用 url 的

创建一个数组

var imgs = [
    "medicalteam.jpg",
    "dog-running-grass.jpg",
    "Hans-treadmill-2.jpg"
];

然后使用 jQuery .css() 方法为你的背景图片加载一个新的 url

var slideshow = function slideshow(i) {
    // set default value for i and prevent it from exceeding the array length
    i = ( typeOf(i) !== 'undefined' and 0 <= i < imgs.length ) ? i : 0;
    $('body').css('background-image', imgs[i]);
    // setTimeOut executes the block after 2500ms
    setTimeOut(function () {
        // call the slideshow function recursively with i + 1
        slideshow(i+1);
    }, 2500);
}

最后你只需调用 slideshow 函数，最好使用另一张图片而不是 CSS 中指定的图片

$(document).ready(function () {
    slideshow(1);
});

我希望这对你有用

【讨论】：

澄清一下，slideshow 函数中的第 2 行使用条件赋值，如果 typeof(i) ... 测试返回 true，则将 i 赋值给 i，否则将 i分配给0

【解决方案2】：

试试这个

$next.addClass('active').animate({opacity:1.0, duration:1000, queue:false});
$active.removeClass('active').animate({opacity:0.0, duration:1000, queue:false});

这将同时改变两个元素的不透明度，因此不会有任何闪烁，并从类和所有图像元素中删除不透明度设置，并将其保留为 1.0，仅用于默认启用且具有活动类的元素。

【讨论】：

【解决方案3】：

降低动画时间或增加间隔时间

您可能会在动画结束和 2.5 秒后的间隔触发之间遇到竞争条件。

setInterval 不保证它会在设定的时间后完全触发，因此它可能会在稍后执行几微秒等

更简单的代码可能更适合幻灯片

function slideSwitch() {
    if( $('#slideshow img').length > 1 ) { //Make sure we have more than 1 img otherwise dont do a effect 
         var active = $('#slideshow img:first'); //Active img is always first
         var next =  active.next();
         active.fadeOut(500,function(){
              //Moves the current img to end of the DOM 
              //so that the next image will now be returned
              //when `img:first`is used
              $("#slideshow").append($(this));
         });
         next.fadeIn(500);
    }
}

fadeIn 和 fadeOut 是用于淡入和淡出元素的更简单的 jquery 函数并且fadeOut 和fadeIn 间隔使动画在0.5 秒内发生，剩下大约2 秒的显示时间。

【讨论】：