利用jquery实现滚动图片

最新推荐文章于 2025-10-13 10:27:36 发布

原创最新推荐文章于 2025-10-13 10:27:36 发布 · 893 阅读

1 ·

CC 4.0 BY-SA版权

前端页面专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用jQuery库来实现元素轮播效果的方法。通过点击前后按钮，可以平滑地切换显示不同的元素，主要利用了jQuery中的animate方法完成动画效果。此示例适用于前端开发人员学习jQuery动画及事件处理。

效果如下所示：

代码如下所示：

主要是利用了animate方法

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" src="jquery/jquery.js"></script>
        <style type="text/css">
        ul{
            list-style: none;
        }
        ul li{
            float:left;
        }
        #prevBtn,#nextBtn{
            width:80px;height:25px;
        }
        .tab_list{
            width:600px;overflow:hidden;height:200px;padding:0px;margin:0px;margin-left:50px;border:10px solid #cccccc;
        }
        .tab_item{
            width:184px;height:184px;margin:8px;
        }
        </style>
        <script type="text/javascript">
        var num = -1;
        var totalNum = 8;
        jQuery(document).ready(function(){
            jQuery("#prevBtn").click(function(){
                if(num < 4){
                    num++;
                }
                
                jQuery(this).parent().next().children().eq(num).stop().animate({
                    marginLeft:"-250px"
                },500);
            });
            jQuery("#nextBtn").click(function(){
                if(num >= 0){
                    jQuery(this).parent().next().children().eq(num).stop().animate({
                        marginLeft:"0px"
                    },500);
                    num--;
                }
            });
        });
        </script>
    </head>
    <body>
        <div style="margin:58px;">
            <input type="button" id="prevBtn" value="向前"/>  
            <input type="button" id="nextBtn" value="向后"/>
        </div>
        <ul class="tab_list">
            <li><div class="tab_item" style="background:red;"/></li>
            <li><div class="tab_item" style="background:black;"/></li>
            <li><div class="tab_item" style="background:blue;"/></li>
            <li><div class="tab_item" style="background:orange;"/></li>
            <li><div class="tab_item" style="background:green;"/></li>
            <li><div class="tab_item" style="background:pink;"/></li>
            <li><div class="tab_item" style="background:yellow;"/></li>
            <li><div class="tab_item" style="background:brown;"/></li>
        </ul>
    </body>
</html>