我是jQuery的新手，正在解决这个问题。在我的document.ready函数中，当我应用到链接上的click事件发生时，.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>
最佳答案
尝试这个：
<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/