文字公告滚动轮播

HTML代码块： user-gold-cdn.xitu.io/2018/11/22/…

        css 代码块: 
                * {
            	margin:0;
            	padding:0;
            }
            li {
            	list-style:none;
            }
            .news {
            	height:35px;
            	background:#fff;
            	overflow:hidden;
            }
            .news .t_news {
            	height:20px;
            	color:#2a2a2a;
            	margin-top:15px;
            	overflow:hidden;
            	position:relative;
            	width:500px;
            }
            .news .news_li,.swap {
            	line-height:20px;
            	display:inline-block;
            	position:absolute;
            	top:0;
            	right:0;
            	font-size:14px;
            	text-align:right;
            	color:#585858
            }
            .news .swap {
            	top:20px;
            }
            

     **js代码块:
     $('.swap').html($('.news_li').html());
     x = $('.news_li');
     y = $('.swap');
     h = $('.news_li li').length * 20; //20为每个li的高度
     var hh = $('.news_li li').length;
     if (hh > 1)
      //setTimeout(b,3000);//滚动间隔时间 现在是3秒
       b();
    b();

    function b() {
        t = parseInt(x.css('top'));
        //alert(t)
        y.css('top', '20px');
        x.animate({
            top: t - 20 + 'px'
        }, 'slow'); //20为每个li的高度
        if (Math.abs(t) == h - 20) { //20为每个li的高度
            y.animate({
                top: '0px'
            }, 'slow');
            z = x;
            x = y;
            y = z;
        }
        setTimeout(b, 3000); //滚动间隔时间 现在是3秒
    }


        先复制试一下是不是你想要的效果  希望能帮到你们哈！！！
复制代码

转载于:https://juejin.im/post/5bf67e1fe51d4507c12bbb6e