javascript：全角居中動畫滑塊

我正在嘗試使用javascript製作按鈕控制滑塊。我有一個全寬div，有一個大背景圖片。我希望背景圖片可以在點擊時左右移動。到目前爲止，我已經設法做到這一點，問題是讓它停在正確的位置。javascript：全角居中動畫滑塊

我用setTimeout控制動畫，使用％而不是px，因爲我希望背景圖像以50％爲中心開始。現在我需要它左右移動1000px，具體取決於我點擊的按鈕。我還需要防止按鈕在每次點擊時增加動畫的速度。

據我瞭解，這可以使用clearTimeout來完成。我還沒有找到一個很好的寫作方式，所以我正在尋求幫助或推動正確的方向。謝謝。下面

代碼：

的index.html

<!doctype html> 
<html> 
     <head> 
     <link rel="stylesheet" type="text/css" href="reset.css"/> 
     <link rel="stylesheet" type="text/css" href="demo.css"/> 
    </head> 
    <body> 
     <div id="top"> 
      <div id="top_center"></div> 
     </div> 
      <div id="header"> 
       <div id="button_container"> 
        <div id="button_left"> 
         <a href="#" class="links"> < <a/> 
        </div> 
        <div id="button_right"> 
         <a href="#" class="links"> > <a/> 
        </div> 
       </div> 
      </div> 
     <div id="bottom"> 
      <div id="bottom_center"></div> 
     </div> 
     <script type="text/javascript" src="slider.js"></script>   
    </body> 
</html>

slider.js

var slider = { 

    init: function(){ 

     var header = document.getElementById("header"); 
     header.style.backgroundPosition = "50%"; 
     var timeout; 

     var button_left = document.getElementById("button_left"); 
     var button_right = document.getElementById("button_right"); 

     button_left.onclick = function(){ 

      header.style.backgroundPosition = parseInt(header.style.backgroundPosition) + 1 + '%'; 
      timeout = setTimeout(button_left.onclick, 20);   
     } 

     button_right.onclick = function(){ 

      header.style.backgroundPosition = parseInt(header.style.backgroundPosition) - 1 + "%"; 
      timeout = setTimeout(button_right.onclick, 20); 
     } 
    } 
} 
window.onload = slider.init;

好吧，我解決了使用jQuery作爲約翰·費希爾認爲這個小鹹菜。我用Harry Finn的這個tutorial。我不得不對他的代碼和CSS做一些修改，但結果是我想要的。

來源

2013-05-29 Jackie Chan