Question

我正在开发一个带有背景图片幻灯片的启动页面，我想继续循环，但是现在它正在闪烁而不是均匀循环。第一张图片不会停留在循环中：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>

Answer 1

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

你可能在动画结束和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秒钟显示时间。

Answer 2

这些图片似乎没有任何语义值，您是否考虑将其包含为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()方法为背景图片加载新网址

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);
});

我希望这对你有用

Answer 3

试试这个

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

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

jQuery幻灯片没有正确循环

3 个答案: