如何在按钮单击时为左右滚动添加动画效果

How can i add animate effect for scrolling right and left on button click?

本文关键字：添加 滚动 动画 左右 按钮 单击      更新时间：2023-09-26

我是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>

试试这个：

<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/

语法

：.animate（{'css property'，'value'}，'speed'），所以将是 .animate（{'left'，'100px'}，'800'），如果你想动画到左，只需在值之前添加一个（减号），否则它会动画到右边。另请注意，animate 不支持所有 css 属性。

相关文章：