Question

我的滑块适用于所有浏览器/计算机，但在一个人的计算机上进行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>

Answer 1

我不会以任何方式认为这是一个答案，但是我不会让我在目前的声誉中添加评论，但请看一下这页：

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

这似乎是你想要以不同的方式实现的目标。它在过去对我很有用，并且代码解释得相当好。也许您可以使用它或使用它的一些想法来帮助您的项目。

使用此功能，您可以将图像分成5-10个部分，然后滚动浏览它们，将乞讨图像添加到最后以重置滑块。这在上面的文章中已经非常清楚地解释了。

至于为什么它会像你的代码一样出现问题，我坦率地说没有任何线索。对不起，我不能直接回答你的问题。

我制作了一个自定义图像滑块，图像抖动有一个奇怪的错误

1 个答案: