切换风格

后盾人PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 267|回复: 3

[web前端] 无缝轮播的问题

[复制链接]
     
  • TA的每日心情
    开心
    2018-7-29 21:40
  • 签到天数: 28 天

    [LV.4]偶尔看看III

    5

    主题

    51

    帖子

    1294

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1294
    活动推广币
    0 个
    后盾币
    1294 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    51
    发表于 2018-1-12 18:12:05 | 显示全部楼层 |阅读模式
    <!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>无缝隙滚动消息</title>
            <style type="text/css">
                    *{
                            padding:0;
                            margin:0;
                    }
                    #box{
                            margin:150px auto;
                            width:500px;
                            height:40px;
                            border:5px solid #fa9794;
                            position: relative;
                            overflow: hidden;
                    }
                    #box ul{
                                    position: absolute;
                                    buttom:0px;
                                    left:0;
                                    margin-top:-80px;
                    }
                    #box ul li{
                            width:500px;
                            height:40px;
                            line-height: 40px;
                            list-style: none;
                    }
            </style>
            <script type="text/javascript" src="jquery-1.11.3.js"></script>
            <script type="text/javascript">
                    $(function(){
                            // 设置定时器每1000毫秒运行一次
                            setInterval(function(){
                            //让第一个li高度变为0
                            $("#box ul li").first().height(0);
                            //将第一个li追加到ul的最后
                            $("#box ul").append($("#box ul li").first());
                            //让最后一个li高度逐渐变为40
                            $("#box ul li").last().animate({'height':'40px'},500);
                    },1000)
                   
                           
                    })
            </script>
    </head>
    <body>
            <div id="box">
                    <ul>
                            <li style="background: greenyellow;">陕西一干部扇教师耳光 因学校让签"安全保证书"</li>
                            <li style="background: orange;">河南孤寡失明老人"吃猪食"度日 现已入住敬老院</li>
                            <li style="background: dodgerblue;">北京首列磁悬浮列车上线调试,时速100公里2017年投运</li>
                            <li style="background: deeppink;">90后爱开网店是国家隐患 危害实体经济</li>
                    </ul>
            </div>
    </body>
    </html>

         
  • TA的每日心情
    开心
    2018-7-29 21:40
  • 签到天数: 28 天

    [LV.4]偶尔看看III

    5

    主题

    51

    帖子

    1294

    积分

    高中生

    Rank: 5Rank: 5

    积分
    1294
    活动推广币
    0 个
    后盾币
    1294 个
    注册时间
    2017-12-20
    在线时间
    20 小时
    帖子
    51
     楼主| 发表于 2018-1-12 18:12:41 | 显示全部楼层
    一直向下轮播,怎么向上轮播啊
         
  • TA的每日心情
    擦汗
    2018-9-27 11:57
  • 签到天数: 2477 天

    [LV.Master]伴坛终老

    5095

    主题

    2万

    帖子

    297万

    积分

    管理员

    ★后盾论坛大管家老鱼★

    Rank: 9Rank: 9Rank: 9

    积分
    2978350
    活动推广币
    12685 个
    后盾币
    2978350 个
    注册时间
    2011-5-5
    在线时间
    8825 小时
    帖子
    23604

    终身成就奖优秀斑竹奖宣传大使奖特殊贡献奖金点子奖原创先锋奖金秋活动荣誉勋章灌水天才奖新人进步奖签到达人奖

    QQ
    发表于 2018-1-16 11:46:12 | 显示全部楼层
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>无缝隙滚动消息</title>
    6.     <style type="text/css">
    7.         *{
    8.             padding:0;
    9.             margin:0;
    10.         }
    11.         #box{
    12.             margin:150px auto;
    13.             width:500px;
    14.             height:40px;
    15.             border:5px solid #fa9794;
    16.             position: relative;
    17.             /*overflow: hidden;*/
    18.         }
    19.         #box ul{
    20.             position: absolute;
    21.             bottom:-40px;
    22.             left:0;
    23.         }
    24.         #box ul li{
    25.             width:500px;
    26.             height:40px;
    27.             line-height: 40px;
    28.             list-style: none;
    29.         }
    30.     </style>
    31.     <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    32.     <script type="text/javascript">
    33.         $(function(){
    34.             // 设置定时器每1000毫秒运行一次
    35.             setInterval(function(){
    36.                 //让第一个li高度变为0
    37.                 $("#box ul li").first().height(0);
    38.                 //将第一个li追加到ul的最后
    39.                 $("#box ul").append($("#box ul li").first());
    40.                 //让最后一个li高度逐渐变为40
    41.                 $("#box ul li").last().animate({'height':'40px'},500);
    42.             },1000)


    43.         })
    44.     </script>
    45. </head>
    46. <body>
    47. <div id="box">
    48.     <ul>
    49.         <li style="background: greenyellow;">陕西一干部扇教师耳光 因学校让签"安全保证书"</li>
    50.         <li style="background: orange;">河南孤寡失明老人"吃猪食"度日 现已入住敬老院</li>
    51.         <li style="background: dodgerblue;">北京首列磁悬浮列车上线调试,时速100公里2017年投运</li>
    52.         <li style="background: deeppink;">90后爱开网店是国家隐患 危害实体经济</li>
    53.     </ul>
    54. </div>
    55. </body>
    56. </html>
    复制代码
         
  • TA的每日心情
    无聊
    2018-3-3 00:30
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    0

    主题

    38

    帖子

    297

    积分

    学前班

    Rank: 2

    积分
    297
    活动推广币
    0 个
    后盾币
    297 个
    注册时间
    2017-12-13
    在线时间
    4 小时
    帖子
    38
    发表于 2018-1-27 22:12:47 | 显示全部楼层
    打撒 爱的卢卡斯看到了撒娇的阿三 阿三
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    Archiver|小黑屋|后盾人 人人做后盾 ( 京ICP备12048441号-3 )

    GMT+8, 2018-10-24 09:40 , Processed in 0.212974 second(s), 31 queries .

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表