jQuery的幻灯片不正确循环(jQuery Slideshow Not Looping Corre

我开发了，我想不断循环的背景图像幻灯片一个醒目网页，但现在它的闪烁，而不是循环均匀。第一个图像不停留在循环，或者： 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犯规保证它会在设定的时间后正好火，所以可能以后等EXECUT几微秒越快

简单的代码可能是幻灯片更好

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

淡入淡出和更简单的jquery功能和缩小元件和淡出和淡入淡出的间隔使得留下大约2秒显示时间的0.5秒时间内动画发生。

Answer 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仅是默认启用的，其具有主动类元素。

Answer 3:

这些图像似乎没有任何语义值，你有没有考虑，包括他们作为background-image呢？

所以代替<div id="slideshow">您只需添加下面的CSS规则：

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

我希望这对你的作品

文章来源: jQuery Slideshow Not Looping Correctly