0

私のスライダーは、1 人のコンピューターのサファリを除いて、すべてのブラウザー/コンピューターで動作します。
これは奇妙なエラーです (約 7 秒後に始まります):

http://www.youtube.com/watch?v=eoNWkT7MDJQ&feature=youtu.be

コンピューター/ブラウザー間のこの奇妙な不一致の原因は何ですか?

ありがとうございました！

編集：ここにコードがあります

JS:

    setInterval(wells_fancy_slider, 130);
    t = null;
    timeout_variable = null;


})

function wells_fancy_slider() {
    if (!paused) {
        if(style=='day'){
            if (parseInt($('.building_container').css('left')) < -2200) {
                $('.building_container').css('left', '+=4000');
            }
            if (parseInt($('.building_container2').css('left')) < -2200) {
                $('.building_container2').css('left', '+=4000');
            }
        }else{
            if (parseInt($('.building_container_night').css('left')) < -2200) {
                $('.building_container_night').css('left', '+=4000');
            }
            if (parseInt($('.building_container_night2').css('left')) < -2200) {
                $('.building_container_night2').css('left', '+=4000');
            }
        }

        $('.building_container_night').css('left', '-=' + speed);
        $('.building_container_night2').css('left', '-=' + speed);

        $('.building_container').css('left', '-=' + speed);
        $('.building_container2').css('left', '-=' + speed);
    }
}

HTML:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="wells_slider.css">
        <script type="text/javascript" src="wells_slider.js"></script>
    </head>
    <body>

        <div id="container">
            <img id="night_sign" src="img/full_night.png"/>
            <img id="day_sign" src="img/full_day.png">
            <!-- day -->
            <div class="building_container">
                <img class="building b1" id="b1" src="img/buildings/b1.png" width="250" height="250"/>
                <a href="http://www.lifestylemirror.com/living/culture/lifestyle-mirror-lifestyle-avenue-exclusives-boutique/">
                    <div class="popover pb1" ><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b2" id="b2" src="img/buildings/b2.png" width="180" height="240"/>
                <a href="http://www.lifestylemirror.com/woman/shoes-bags/lifestyle-mirror-lifestyle-avenue-exclusive-akris-boutique/">
                    <div class="popover pb2"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b3" id="b3" src="img/buildings/b3.png" width="180" height="230"/>
                <a href="http://www.lifestylemirror.com/woman/jewelry-watches/lifestyle-mirror-lifestyle-avenue-exclusive-luisaviaroma-boutique/">
                    <div class="popover pb3"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b4" id="b4" src="img/buildings/b4.png" width="155" height="240"/>
                <a href="http://www.lifestylemirror.com/woman/fashion/lifestyle-mirror-lifestyle-avenue-exclusive-moncler-boutique/">
                    <div class="popover pb4"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b5" id="b5" src="img/buildings/b5.png" width="180" height="240"/>
                <a href="http://www.lifestylemirror.com/woman/fashion/lifestyle-mirror-lifestyle-avenue-exclusive-marni-boutique/">
                    <div class="popover pb5"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b6" id="b6" src="img/buildings/b6.png" width="180" height="240"/>
                <a href="http://www.lifestylemirror.com/living/culture/holiday-gift-guide-2012/">
                    <div class="popover pb6"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b7" id="b7" src="img/buildings/b7.png" width="180" height="240"/>
                <a href="http://www.lifestylemirror.com/woman/fashion/lifestyle-mirror-lifestyle-avenue-exclusive-versace-boutique/">
                    <div class="popover pb7"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b8" id="b8" src="img/buildings/b8.png" width="180" height="240"/>
                <a href="http://www.lifestylemirror.com/woman/jewelry-watches/lifestyle-mirror-lifestyle-avenue-exclusive-cartier-boutique/">
                    <div class="popover pb8"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b9" id="b9" src="img/buildings/b9.png" width="150" height="280"/>
                <a href="http://www.lifestylemirror.com/woman/shoes-bags/lifestyle-mirror-lifestyle-avenue-exclusive-smythson-boutique/">
                    <div class="popover pb9"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b10" id="b10" src="img/buildings/b10.png" width="250" height="250"/>
                <a href="http://www.lifestylemirror.com/woman/fashion/lifestyle-mirror-lifestyle-avenue-exclusive-the-webster-boutique/">
                    <div class="popover pb10"><div class="shop_now">SHOP NOW</div></div>
                </a>
                <img class="building b11" id="b11" src="img/buildings/b11.png" width="150" height="230"/>
                <a href="http://www.lifestylemirror.com/man/style/lifestyle-mirror-lifestyle-avenue-exclusive-brooks-brothers-boutique/">
                    <div class="popover pb11"><div class="shop_now">SHOP NOW</div></div>
                </a>
            </div>

        </div>
    </body>
</html>
4

1 に答える 1

0

私はこれを決して答えとは考えていませんが、現在の評判でコメントを追加することはできませんが、このページをご覧ください。

http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/

これはあなたが達成しようとしているもののようですが、別の方法です。過去に私にとってはうまく機能し、コードはかなりよく説明されています。これを使用したり、そこからいくつかのアイデアを使用してプロジェクトを支援したりすることができます。

これを使用すると、画像をたとえば 5 ～ 10 の部分に分割し、それらをスクロールして物乞いの画像を最後に追加し、スライダーをリセットすることができます。これについては、上記の記事でかなり明確に説明されています。

なぜあなたのコードでそのようにグリッチアウトするのかについては、率直に言って手がかりがありません. 申し訳ありませんが、あなたの質問に直接答えることはできません。

于 2012-11-26T03:58:17.517 に答える