js 新闻轮播

一般门户或一些信息网站， 首页都会有头条或者快报进行轮播的。

某宝和某东的app， 首页也是有快报或头条轮播的。

网上查了一下， 没有专门的插件或组件， 其他人提供的代码也是差不多的， 所有我自己整理和重构了一下代码。

功能：

• 能对新闻数组进行轮播， 对新闻数组数量有限制
• 鼠标指上去停止轮播， 鼠标离开继续轮播
• 点击新闻后打开新闻列表。
• 可以追加新闻数据， 新追加的数据在最前面， 旧的数据排后面或者淘汰。、

页面元素就只有一个DIV， 里面的DIV，UL和LI 都是动态生成，指定最基本的样式。

   <div id="my_notice_active">
            lin49940
    </div>

重构后的 JS 代码

<script>
        function lhqNoticeActive(ele, data, time, lhqNoticeActive_LIMAX) {
            ele.empty();
            lhqNoticeActive_LIMAX = lhqNoticeActive_LIMAX || 10; //最大数目，默认10
            var divele = $('<div>').css({
                'margin': '0',
                'padding': '0',
                'float': 'left',
                'width': '55 %',
                'height': '25px',// 此高要等于父高
                'padding': '0',
                'overflow': 'hidden',
                'position': 'relative',
                'margin-left': '16%'
            });
            ele.append(divele);
            var ulele = $('<ul>').css({
                'font-weight': '700',
                'list-style': 'none',
                'line-height': '25px',
                'display': 'block',
                'white-space': 'nowrap',
                'text-overflow': 'ellipsis',
                'overflow': 'hidden'
            });
            divele.append(ulele);
            var data1 = data || ['暂时没数据'];
            for (var i = 0; i < data1.length && i < lhqNoticeActive_LIMAX; i++) {
                $('<li>').html(data1[i]).appendTo(ulele);
            }
            ulele.lhqNoticeActive_sourceData = data1;

            function t1() {
                ulele.animate({
                    "marginTop": "-25px"
                }, 500, function () {
                    $(this).css({ marginTop: "0" }).find(":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;
        }

        //新数据排前面, 老数据排后面或者淘汰
        function lhqNoticeActive_changeData(ulele, srcData, lhqNoticeActive_LIMAX) {
            lhqNoticeActive_LIMAX = lhqNoticeActive_LIMAX || 10;
            var data1 = srcData || ['暂时没数据'];
            //ulele.empty();
            var sourceData = ulele.lhqNoticeActive_sourceData || ['暂时没数据'];
            
            if (sourceData.length == 0 || (sourceData.length == 1 && sourceData[0] == '暂时没数据')) {
                //空数据, 直接添加
                for (var i = 0; i < data1.length && i < lhqNoticeActive_LIMAX; i++) {
                    $('<li>').html(data1[i]).appendTo(ulele);
                }
                ulele.lhqNoticeActive_sourceData = data1;
                return;
            }

            data1 = data1.concat(sourceData);
            ulele.empty();
            for (var i = 0; i < data1.length && i < lhqNoticeActive_LIMAX; i++) {
                $('<li>').html(data1[i]).appendTo(ulele);
            }
            ulele.lhqNoticeActive_sourceData = data1;
        }
   

    </script>

调用方式

        var data1 = ['111111', '22222', '3333', '44444444'];
        var ulele = lhqNoticeActive($("#my_notice_active"), data1, 3000);
        //追加数据
        var data2 = ['5555', '66666'];
        setTimeout(function () {
            lhqNoticeActive_changeData(ulele,data2);
        }, 10000);
        //重新加载数据的话
lhqNoticeActive($("#my_notice_active"), data2, 3000);