-1

我想使用 jquery 制作滑块，所以我已经制作了在左侧属性中添加值的函数，现在我想要当滑块 div 结束时，它假设来自其父 div 的右侧，就像选框一样，但不想使用选框。

http://jsfiddle.net/

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var left = 0;
        $(function moveable() {

            $('#slider').css('left', --left);

            setTimeout(moveable, 10)

        })
    </script>
    <style>
        .main {
            margin: 0 auto;
            width: 500px;
            height: 200px;
            border: solid 1px #F00;
            overflow: hidden
        }
        #slider {
            position: relative;
            background: #333;
            height: 200px;
        }

    </style>
</head>
<body>
    <div class="main">
        <div id="slider">
            <img src="slider.jpg" width="500" height="200" />
        </div>
    </div>
</body>
4

2 回答 2

1

尝试这样的事情

                        <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <script src="http://code.jquery.com/jquery-latest.js"></script>
                    <style>
                    .main { margin:0 auto; width:500px; height:200px; border:solid 1px #F00; overflow:hidden}
                    #slider {position:relative; background:#333; height:200px;}
                    </style>
                    </head>
                    <body>
                    <div class="main">
                    <div id="slider">
                      <img src="test.png" width="500" height="200" alt="image" id="slider_img" /></div>
                    </div>
                    <script type="text/javascript">
                        var left=0;
                         $("#slider_img").click(function () {
                         $(function moveable(){
                        $('#slider').css('left' ,--left);
                        setTimeout(moveable,10)
                        });
                        });
                    </script>
                    </body>
                    </html>

检查jsfiddle输出

http://jsfiddle.net/srinivasan/T7xhW/2/

于 2012-04-24T13:22:15.267 回答
0

已经有一个 jQuery UI 滑块：http: //jqueryui.com/demos/slider/

它运作良好，样式选项非常好。如果对 jQuery UI 没有限制，我强烈建议改用它。

于 2012-04-24T11:30:11.177 回答