1

こんにちは、私はこのコードで簡単なスライダーを持っています:

HTML コード:

<div id="gallery">
    <a href="#" id="left-arrow">..</a>
    <a href="#" id="right-arrow">..</a>
    <div id="container">
        <div class="item">...</div>
        <div class="item">...</div>
        ...
        <div class="clr"></div>
    </div>
</div>

CSS スタイル:

#gallery {
    position:relative;
    width:290px;
    height:200px;
    overflow:hidden;
}
#gallery #container{
    position:absolute;
    left:0px;
    top:0px;
    width:1160px;
}
#right-arrow, #left-arrow{
    width:30px;
    height:30px;
    position:absolute;
    top:85px;
    z-index:200;
}
#right-arrow{
    right:10px;
}
#left-arrow{
    left:10px;
}

JS コード:

    <script type="text/javascript">
    $(document).ready(function(){
// I must set left position explicitly if not when fetching left position it returns "auto"
// I used position.left property, however. but It doesn't returns left relative 
// to parent insted (I think) relative to document which (I don't know why? It is not 
// according to Jquery documentation which position.left - .offset() is relative to document)
        $('#container').css('left', '0px'); 
        $('#right-arrow').click(function(){
            move('right');
        });
        $('#left-arrow').click(function(){
            move('left');
        })

        move = function (direction){
                .
                . 
                .
            // The problem is here:
                $('#container').animate(left:'+=290');

                // although setting it's css left position doesnt work
                $('#container').css('left', '290px');

                // I return container to use it in console!
                return $(#container');
        }
    });
    </script>

コンソールを使用してデバッグしましたが、css の位置が適切に設定されていることがわかりましたが、実際には機能しません。

コンソール：

>>> var x = move()
Object[div#container]

>>> x.css('left', '1000px')
Object[div#container]

>>> x.css('left')
"1000px"
// But It doesn't move in reality

私は Javascript が嫌いです。助けてください。何が問題なのかわかりません。

4

2 に答える 2

4

、、およびcss ルールを機能させるtopには、cssルールを に追加する必要があります。leftbottomrightpositiondom

div
{
   top:10px;
   left:10px;
}

上記のコードは上と左を div に適用しませんが、

div
{
   top:10px;
   left:10px;
   position : relative;//absolute or fixed or etc
}

上記のコードは機能します。

以下のエラーがあります。

と置き換えますreturn $(#container'); return $('#container');

また、_ .animate(left:'+=290'); .animate({left:'+=290'});

于 2013-04-01T05:44:20.910 に答える
2

なんてこった、私は問題を見つけました。問題は私のコードではありませんでした。別の要素があり、ID が別の場所にあり'container'ました。サードパーティのモジュールにありました。申し訳ありませんが、私のせいです!! :D

于 2013-04-01T07:25:33.423 に答える