0

我的滑块适用于所有浏览器/计算机，但一个人的计算机上的 safari 除外。
这是一个奇怪的错误（大约 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 回答