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

要使top、和css 规则起作用left，您需要将css 规则添加到.bottomrightpositiondom

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

上面的代码不会应用 top 和 left 到 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'是在第 3 方模块中，对不起，伙计们是我的错！:D

于 2013-04-01T07:25:33.423 回答