1

我是 jQuery 新手，遇到了这个问题。在我的 document.ready 函数中，当我在链接上应用的点击事件发生时，.animate() 效果不起作用，因此它不会左右滚动。谁能告诉我这有什么问题，以便它左右滚动。

<html>
<head>
<style type="text/css">
ul.images 
{
  padding:0px;
  margin:0px;
  white-space: nowrap;
  width:auto;
  overflow:hidden;
}

ul.images li 
{
  line-height:200px;
  display: inline;

}


</style>

<script type="text/javascript" src="jquery-1.7.2.js"></script>

<script language="javascript">
var totalWidth;
 $(document).ready(function(){
        $("a.abc").click(function() {
            $("#scroller").animate({"scrollLeft":"-=204"},"slow");
            return false;
        });
        $("a.def").click(function() {
            $("#scroller").animate({"scrollRight":"+=204"},"slow");
            return false;
        });
});

</script>

</head>
<body>
<div style="width:1450px">
    <div style="float:left;">
        <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle"><img src="backward.png" height="50" width="50"/></a>
    </div>

        <div style="width:1220px;float:left">
            <ul class="images" id="scroller">
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li> 
                <li class="list"><img src="Tulips.jpg" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="Penguins.jpg" class="image" alt="anuj"  width="200"/></li>       
            </ul>
        </div>

    <div style="float:left;">
        <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;"><img src="forward.png" height="50" width="50"/></a>
    </div>
</div>
</body>
</html>
4

2 回答 2

1

试试这个：

<div style="width:1050px">
<div style="float:left;">
    <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle">PREV</a>
</div>

    <div style="width:1220px;float:left">
        <ul class="images" id="scroller">
            <li class="list"><img src="http://placehold.it/350&text=TEST1" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST2" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST3" class="image" alt="anuj"  width="200"/></li>
            <li class="list"><img src="http://placehold.it/350&text=TEST4" class="image" alt="anuj"  width="200"/></li>     
        </ul>
    </div>

<div style="float:left;">
    <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;">NEXT</a>
</div>


$("a.abc").click(function() {
    $(".images").each(function(){
        $(this).animate({"margin-left":"-=204px"},800)  
            });
});

$("a.def").click(function() {
            $(".images").each(function(){
                $(this).animate({"margin-left":"+=204px"},800)
            });
});

见：http: //jsfiddle.net/MMyGE/

于 2012-05-31T07:23:33.230 回答
0

语法：.animate({'css property','value'},'speed')，如果你想向左设置动画，则为 .animate({'left','100px'},'800')在值之前添加一个（减号），否则它将动画到右边。另请注意，动画不支持所有 css 属性。

于 2012-05-31T06:55:13.643 回答