javascript：全角居中動畫滑塊

Question

我正在嘗試使用javascript制作按鈕控制的滑塊。 我有一個全角div，帶有大背景圖像。 我希望背景圖片在點擊時向左和向右移動。 到目前為止，我已經做到了，問題是使它停在正確的位置。

我用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>

slide.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;

好吧，我按照John Fisher的建議使用jQuery解決了這個小問題。 我使用了哈里·芬恩（Harry Finn）的本教程。 我必須對他的代碼和CSS進行一些修改，但事實證明我希望這樣做。

Answer 1

如果您要制作動畫，為什么不使用JQuery或其他為您處理自動化的JavaScript庫之一。 他們處理許多小細節，這些細節需要您自己管理。

javascript：全角居中動畫滑塊

問題描述

1 個解決方案

解決方案1
0 已采納 2013-05-29 21:34:14

javascript：全角居中動畫滑塊

問題描述

1 個解決方案

解決方案1 0 已采納 2013-05-29 21:34:14

解決方案1
0 已采納 2013-05-29 21:34:14