0

継続的にループしたい背景画像のスライドショーを含むスプラッシュ ページを開発していますが、現在はちらつき、均等にループしていません。最初のイメージもループにとどまりません: 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>
4

3 に答える 3

0

これを試して

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

これにより、両方の要素の不透明度が同時に変更されるため、ちらつきがなくなり、クラスとすべての画像要素から不透明度設定が削除され、アクティブなクラスを持つデフォルトで有効になっている要素に対してのみ 1.0 のままになります。

于 2013-06-02T16:40:49.220 に答える