1

我正在尝试使用 javascript 制作一个按钮控制的滑块。我有一个全角的 div，有一个大的背景图像。我希望背景图像在点击时左右移动。到目前为止，我已经设法做到了，问题是让它停在正确的位置。

我使用 setTimeout 控制动画，使用 % 而不是 px，因为我希望背景图像以 50% 开始居中。现在我需要它向左或向右移动 1000 像素，具体取决于我单击的按钮。我还需要防止按钮在每次点击时增加动画的速度。

据我了解，这可以使用 clearTimeout 来完成。我还没有找到写这篇文章的好方法，所以我正在寻求帮助或朝着正确的方向前进。谢谢你。

下面的代码：

索引.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;

好吧，我按照 John Fisher 的建议使用 jQuery 解决了这个小泡菜。我使用了 Harry Finn 的这个教程。我不得不对他的代码和 css 进行一些修改，但结果却是我想要的。

4

1 回答 1

0

如果您正在制作动画，为什么不使用 JQuery 或为您处理自动化的其他 javascript 库之一。他们处理了很多需要您自己管理的小细节。

于 2013-05-29T21:34:14.170 回答