html js实现列表自动滚动

 1.列表滚动js

/* 蔡燃 列表自动滚动 v1.0.0  备注：需要jquery*/
/**
 * 列表自动滚动
 * @param data 列表数据
 * @param el 列表绑定的元素
 * @param options 配置
 */
function listRoll(data, el, options) {
    var defaults = {
        movePx: 1,//移动距离（px）
        moveTime: 20,//移动时间间隔(毫秒)
        showNum: 5,//显示条数
        showItemHeight: 40,//每个条目的高度
        template: null,//把键值对数据转显示的HTML代码方法
        click: null,//点击事件回调方法
        movePause: true//鼠标移动到滚动列表上是否暂停滚动
    };
    $.extend(defaults, options);

    var dataSize = data.length;
    var listData = [];
    var colRefreshHeight = -defaults.showNum * defaults.showItemHeight;//刷新数据的高度
    var pageSize = defaults.showNum * 2;
    var indexStart = 0;//data设置到显示列表数据的下标
    var startPx = 0;//滚动位置
    var $el = $(el);
    var rollTimeOut = null;

    if (defaults.movePause) {
        //鼠标移入暂停滚动
        $el.bind("mousemove", function () {
            if (rollTimeOut) {
                clearTimeout(rollTimeOut);
            }
        }).bind("mouseout", function () {
            rollTimeOut = setTimeout(function () {
                roll()
            }, defaults.moveTime);
        });
    }

    //设置滚动列表数据
    function setListData() {
        var i;
        if (listData.length === 0) {
            if (pageSize < dataSize) {
                for (i = 0; i < indexStart + pageSize; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
                indexStart += pageSize;
            } else {
                for (i = 0; i < dataSize; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
                indexStart = pageSize - dataSize;
                for (i = 0; i < indexStart; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
            }
        } else {
            listData.splice(0, defaults.showNum);
            if (indexStart + defaults.showNum <= dataSize) {
                for (i = indexStart; i < indexStart + defaults.showNum; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
                indexStart += defaults.showNum;
            } else {
                for (i = indexStart; i < dataSize; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
                indexStart = indexStart + defaults.showNum - dataSize;
                for (i = 0; i < indexStart; i++) {
                    listData.push(getTemplateHtml(data[i],i));
                }
            }

        }
    }

    function getTemplateHtml(dataItem,index) {
        if (defaults.template != null) {
            return defaults.template(dataItem,index);
        } else {
            return dataItem;
        }
    }

    if (defaults.showNum < dataSize) {
        setListData();
        $el.html(listData.join());

        //滚动
        function roll() {
            startPx -= defaults.movePx;
            if (startPx === colRefreshHeight) {
                startPx = 0;
                setListData();
                $el.html(listData.join());
            }
            $el.css({"top": startPx + "px"});
            rollTimeOut = setTimeout(arguments.callee, defaults.moveTime);
        }

        roll();
    } else {
        $el.html(data.join());
    }
}

2.效果