我做了一個自定義圖像滑塊，並有一個奇怪的錯誤與圖像抖動

我的滑塊適用於所有瀏覽器/計算機，除了在一個人的計算機上的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>

來源

2012-11-26 The Puma

請分享一些代碼，如果它不是一個祕密。它支持jQuery？ –

是的，它是由jQuery驅動的，我會盡快給您看點 –

我添加了代碼 –

我不認爲這是一個答案以任何手段，但SO不會讓我請用我目前的聲望添加評論，但請看看本頁：

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

這似乎是你正在嘗試完成，但以不同的方式。這對我來說很好，而且代碼解釋得很好。也許你可以使用它或使用它的一些想法來幫助你的項目。

使用此功能，您可以將圖像分成5至10個部分，然後滾動查看圖像，最後添加乞求圖像以重置滑塊。這在上面的文章中已經很清楚地解釋了。

至於爲什麼它會像你的代碼那樣出現問題，我坦率地說沒有任何線索。對不起，我無法直接回答你的問題。

來源

2012-11-26 03:58:17 Jeremy

謝謝您的建議。我可能已經開始了，但在這一點上，我沒有時間重新實施。它要麼修復我的代碼，要麼明天早上不會去客戶端。呵呵：\ –

啊，我明白了。那麼我希望我能對你有更多的幫助。相信我，我知道它是如何。祝你好運！ – Jeremy

謝謝！我希望這只是一臺發生錯誤的計算機。就像我說的，除了1臺帶有1個瀏覽器的計算機外，其他地方都可以工作啊 –

我做了一個自定義圖像滑塊，並有一個奇怪的錯誤與圖像抖動

回答

相關問題