div 自动滚轮2

HTML:

<div class="cal_bottom"

                 style="height:78%;margin-top:2%;overflow:auto;"

                 id="gridtablejw">

                <ul id="zbry1"></ul>

                <ul id="zbry2"></ul>

            </div>

JS为div赋值：

 policeData: function () {

            var data = [

                { "Img": "/Content/images/police/4.jpg", "code": "001", "CreateTime": "2022-10-19", "Status": "在岗" },

                { "Img": "/Content/images/police/3.jpg", "code": "002", "CreateTime": "2022-10-19", "Status": "出警" },

                { "Img": "/Content/images/police/djj.jpg", "code": "003", "CreateTime": "2022-10-19", "Status": "在岗" },

                { "Img": "/Content/images/police/sxm.png", "code": "004", "CreateTime": "2022-10-19", "Status": "出警" },

                { "Img": "/Content/images/police/lcm.png", "code": "005", "CreateTime": "2022-10-19", "Status": "在岗" },

                { "Img": "/Content/images/police/wzb.png", "code": "006", "CreateTime": "2022-10-19", "Status": "在岗" },

                { "Img": "/Content/images/police/hwb.png", "code": "007", "CreateTime": "2022-10-19", "Status": "在岗" },

                { "Img": "/Content/images/police/db.png", "code": "008", "CreateTime": "2022-10-19", "Status": "在岗" },

            ];

            var _html = "";

            //border - bottom: 1px solid #0c55af;

            for (var i = 0; i < data.length; i++) {

                _html += "<div class='lefttoday_p' style='cursor:pointer' data-id='" + data[i].id + "'>" +

                    "<div style='width:8%;float:left;left:1%;'>" +

                    "<img src='" + data[i].Img + "' style='width:100%;height:100%'/>" +

                    "</div>" +

                    "<div style='width:32%;padding-left:5%; float:left;font-size:13px;color:white'>" +

                       "<p style='padding-top:1%;padding-left:40%'>" + data[i].code + "</p>" +

                    "</div>" +

                    "<div style='width:30%; float:left;font-size:13px;color:white'>" +

                       "<p style='padding-left:48%'>" + data[i].CreateTime + "</p>" +

                    "</div>" +

                    "<div style='width:30%; float:left;font-size:13px;color:white'>" +

                       "<p style='padding-left:34%'>" + data[i].Status + "</p>" +

                    "</div>" +

                    "</div>"

            }

            $("#zbry1").html(_html);

        }

　　

　

JS滚动效果:

//调用滚动效果
function rollzb(t) {

    var ul1 = document.getElementById("zbry1");

    var ul2 = document.getElementById("zbry2");

    var ulbox = document.getElementById("gridtablejw");

    ul2.innerHTML = ul1.innerHTML;

    ulbox.scrollTop = 0; // 开始无滚动时设为0

    var timer = setInterval(rollStartzb, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快

    // 鼠标移入div时暂停滚动

    ulbox.onmouseover = function () {

        clearInterval(timer);

    }

    // 鼠标移出div后继续滚动

    ulbox.onmouseout = function () {

        timer = setInterval(rollStartzb, t);

    }

}

// 开始滚动函数

function rollStartzb() {

    // 上面声明的DOM对象为局部对象需要再次声明

    var ul1 = document.getElementById("zbry1");

    var ul2 = document.getElementById("zbry2");

    var ulbox = document.getElementById("gridtablejw");

    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0

    if (ulbox.scrollTop >= ul1.scrollHeight) {

        ulbox.scrollTop = 0;

    } else {

        ulbox.scrollTop++;

    }

}

　初始化加载：

rollzb(200);//时间越长，滚动越慢，相反，时间越短，滚动越快

　　

div 自动滚轮2的相关教程结束。