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>

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进行一些修改，但结果却是我想要的方式。

Answer 1

如果您正在制作动画，为什么不使用JQuery或其他一个为您处理自动化的JavaScript库。他们处理了很多细节，这些细节很难自行管理。

javascript：全角度居中的动画滑块

1 个答案: