js原生 轮播消息

mark
先上效果图。

截屏2020-03-27下午4.06.58.png

html 内容

 <div id="rotation"></div>

script内容

var sourceData= [
    ['宁双路','堵塞','2020-03-27','2'],
    ['软件大道','拥堵','2020-03-27','1'],
    ['河西大街','交通事故','2020-03-27','2'],
    ['康庄大道','堵塞','2020-03-27','2'],
    ['甲五路','其他','2020-03-27','1'],
    ['花神大道','堵塞','2020-03-27','2'],
    ['甲九路','其他','2020-03-27','1'],
];
//加载数据
rotationScroll($("#rotation"),sourceData, 2000);

function rotationScroll(ele, data, time, active_MAX) {
    ele.empty();
    active_MAX = active_MAX || 8; //最大数目，默认10
    var divele = $('<div>').css({
        'position': 'relative',
        'margin': '0',
        'padding': '0',
        'width': '100%',
        'height': '3rem',
        'overflow': 'hidden'
    });
    var maskdiv = $('<div>').css({
        'position': 'absolute',
        'width': '100%',
        'height': '0.3166rem',
        'background-color': 'rgba(255, 255, 255, 0.272)',
        // 'background':'#fff',
        '-webkit-filter': 'blur(20px)', /* Chrome, Opera */
        '-moz-filter': 'blur(20px)',
        '-ms-filter': 'blur(20px)',
        'filter': 'blur(20px)'
    });
    divele.append(maskdiv);
    ele.append(divele);
    var ulele = $('<ul>').css({
        'top':'0',
        'margin':'0',
        'padding':'0',
        'font-size': '0',
    });
    divele.append(ulele);
    var data1 = data || ['暂时没数据'];
    for (var i = 0; i < data1.length && i < active_MAX; i++) {
        var liele= $('<li>').css({
            'list-style': 'none',
            'margin-top':'0.3333rem',
            'height': '0.2166rem',
        });
        ulele.append(liele);
        var spanele1  = $('<span>').css({
            'font-size': '0.2083rem',
            'font-family': 'PingFangSC-Thin',
            'width': '1.945rem',
            'text-align':'center',
            'display':'-moz-inline-box',
            'display':'inline-block'
        });

        var spanele2  = $('<span>').css({
            'font-size': '0.2778rem',
            'font-family': 'PingFangSC-Thin',
            'width': '2.6896rem',
            'text-align':'center',
            'display':'-moz-inline-box',
            'color':'#fff',
            'display':'inline-block'
        });

        if (data1[i][3]=='1'){ //黄色
            // console.log(spanele2[0].style['color']);
            spanele2[0].style['color'] = '#ff9c00';

        }else if (data1[i][3]=='2') { //红色
            spanele2[0].style['color'] = '#ff0000';
        }

        var spanele3  = $('<span>').css({
            'font-size': '0.2083rem',
            'font-family': 'Open24DisplayS',
            'width': '2.6896rem',
            'text-align':'center',
            'display':'-moz-inline-box',
            'display':'inline-block'
        });
        spanele1.html(data1[i][0]).appendTo(liele);
        spanele2.html(data1[i][1]).appendTo(liele);
        spanele3.html(data1[i][2]).appendTo(liele);
    }
    ulele.lhqNoticeActive_sourceData = data1;

    function t1() {
        ulele.animate({
            "marginTop": "-25px"
        }, 500, function () {
            $(this).css({ marginTop: "0" }).find("li:first").appendTo(this);
        })
    };

    ulele.time1 = setInterval(function () {
        t1();
    }, time);

    ulele.mouseover(function () { clearInterval(ulele.time1) });
    ulele.mouseout (function () {
        ulele.time1 = setInterval(function () {
            t1();
        }, time);
    });

    return ulele;
}

注意 ：踩了个坑 ，一定要在ul标签的 style
top: 0px; margin: 0px; padding: 0px; font-size: 0px;
不然两个li标签间距会特别大。