jQuery Slideshow Not Looping Correctly

2019-09-09 21:35发布

站内问答 / jQuery
988 3 6

I'm developing a splash page that has a background image slideshow that I want to continually loop, but right now it's flickering and not looping evenly. The first image isn't staying in the loop, either: http://newmarketdvm.com/vsc/test/

This is the code. I've embedded the slideshow code in the header because it's a splash page and I'm wondering if that's making it glitch, too, but I really can't seem to figure out the image classes/whether that's the issue with it. Am I just setting those incorrectly or do I need to modify the 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>

3条回答
爱情/是我丢掉的垃圾
2楼-- · 2019-09-09 21:43

Lower the animation time or increase the interval time

You are probably getting a race condition between the animation finishing and the interval firing after 2.5 seconds.

setInterval doesnt guarantee it will fire exactly after the set time so it might execut a few microseconds sooner later etc

simpler code might be better for the slideshow 

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 and fadeOut are simpler jquery functions for fading in and out elements and the fadeOut and fadeIn intervals makes the animation happen within a .5 second time which leaves around 2 seconds for display time.

查看更多
0人赞 添加讨论(0) 举报
女痞
3楼-- · 2019-09-09 21:49

These images don't seem to have any semantic values, have you considered including them as background-image instead?

So instead of the <div id="slideshow"> you would simply add the following css rule:

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

Then the javaScript should be trivial. You could for example create an array with the url's

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

And then use jQuery .css() method to load a new url for your background-image

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

and finally you just call the slideshow function, preferable with another image than the one specified in the CSS

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

I hope this works for you

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-09-09 21:53

Try this

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

This would change opacity of both elements simultaneously so there won't be any flickers, and also remove opacity setting from classes and all the image elements and keep it as 1.0 for only element which is by default enabled which has active class.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)