1

JavaScriptを使用してボタン制御のスライダーを作成しようとしています。大きな背景画像を持つ全幅の div があります。クリックで背景画像を左右に動かしたい。これまでのところ、私はそれを行うことができましたが、問題はそれを正しい位置で停止させることです.

背景画像を50％で中央揃えにしたいので、pxの代わりに％を使用して、setTimeoutでアニメーションを制御しています。クリックするボタンに応じて、左または右に 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>

スライダー.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 のこのチュートリアルを使用しました。彼のコードと css にいくつかの変更を加える必要がありましたが、思い通りになりました。

4

1 に答える 1