JS实现div内部的文字或图片自动循环滚动

最新推荐文章于 2024-07-26 03:34:02 发布

四根毛

最新推荐文章于 2024-07-26 03:34:02 发布

阅读量3k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wanghongios/article/details/11688317

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style type="text/css">
.content{width:500px;height:300px;position:absolute;left:200px;top:100px;border:solid 2px red;padding:10px;overflow:hidden}
 dl{width:400px;height:30px;border:1px solid black;}
</style>

<div class="content">
    <dl>
        <dt>测试数据1</dt>
    </dl>
    <dl>
        <dt>测试数据2</dt>
    </dl>
    <dl>
        <dt>测试数据3</dt>
    </dl>
    <dl>
        <dt>测试数据4</dt>
    </dl>
    <dl>
        <dt>测试数据5</dt>
    </dl>
    <dl>
        <dt>测试数据6</dt>
    </dl>
    <dl>
        <dt>测试数据7</dt>
    </dl>
    <dl>
        <dt>测试数据8</dt>
    </dl>
    <dl>
        <dt>测试数据9</dt>
    </dl>
    <dl>
        <dt>测试数据10</dt>
    </dl>
</div>
<script type="text/javascript"  src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('.content dl').hide();
        $('.content dl:gt('+($('.content dl').length - 5)+')').show();
        window.setInterval(function(){
            $('.content dl:visible:first').prev().slideDown("fast",function(){
                $(this).animate({opacity:1},2000,function(){
                  if($('.content dl:hidden').length == 0){
                        $('.content dl').hide();
                        $('.content dl:gt('+($('.content dl').length - 5)+')').show();
                    }
                });
            });
        },1000);
        
    });
</script>