-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

すでにjQueryUIスライダーがあります：http：//jqueryui.com/demos/slider/

それはうまく機能し、スタイリングオプションは優れています。jQuery UIに制約がない場合は、代わりにjQueryUIを使用することを強くお勧めします。

于 2012-04-24T11:30:11.177 に答える