我怎样才能添加动画效果左右滚动按钮点击？ [英] How can i add animate effect for scrolling right and left on button click?
本文介绍了我怎样才能添加动画效果左右滚动按钮点击？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是jQuery的新成员，并且解决了这个问题。在我的document.ready函数中，当我在链接上应用的点击事件发生时，.animate（）效果不起作用，因此它不会左右滚动。任何人都可以告诉我这是什么问题，以便它可以左右滚动。
I'm new in jQuery and encoutering this problem.In my document.ready function .animate() effect is not working on when the click event which i have applied on links occurs,so it is not scrolling left and right. Can anyone tell me what is wrong in this so that it will scroll left and right.
<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>
推荐答案
试试这个：
Try this:
<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/
这篇关于我怎样才能添加动画效果左右滚动按钮点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
