js无缝滚动

页面主要代码如下:

<div id="scrollarea" class="scrollarea" style="height:100%;overflow: hidden">
  <div id="clonepart" style="margin-top:0">
   </div>
   <div id="clonepartHide">
   </div>
</div>

数据调用方法代码如下:

$.ajax({
  url: "${ctx}/pwlp/decision/environmentSubject/getlawItem.ht",
  type: 'POST', //GET
  async: true,    //或false,是否异步
  data:{year:year,districtCode:districtCode,monthVal:monthVal,domain:"sthjhzybh"},
  dataType: 'json',    //返回的数据格式:json/xml/html/script/jsonp/text
  success: function (data) {
    $("#clonepart").empty();
    var str = "";
    var classArr = new Array("juxh-one","juxh-two","juxh-three","juxh-four","juxh-five","juxh-six","juxh-seven");
    for(var i = 0; i < data.thematicAnalysisList.length; i++){
      if(i < 7){
        str += "<div class='judgeRule-list districtRankDiv-list'>"+
              "<div class='judgeRule-list-left fl'>"+
                "<span class='judgeRule-list-xh "+classArr[i]+"'>"+(i+1)+"</span>"+
                "<span>"+data.thematicAnalysisList[i].lawItem+"</span>"+
              "</div>"+
            "</div>"
      }
    }
    if(str == ""){
      $("#clonepart").append("<div style='width:100%; text-align:center'>暂无数据</div>");
    }else{
      $("#clonepart").append(str);
    }
    var flag = false;
    if(data.thematicAnalysisList.length > 6){
      flag = true;
    }
    roll('clonepart','clonepartHide','scrollarea',flag);
  }
})

无缝滚动代码如下:

//轮播滚动
function roll(newDataUl,hideNewDataUl,newDataDiv,flag) {
  var ul1 = document.getElementById(newDataUl);
  var ul2 = document.getElementById(hideNewDataUl);
  var box = document.getElementById(newDataDiv);
  if(flag){
    ul2.innerHTML = ul1.innerHTML;
  }
  box.scrollTop = 0;
  var timer = setInterval(rollStart, 30);
  box.onmouseover = function () {
    clearInterval(timer);
  }
  box.onmouseout = function () {
    timer = setInterval(rollStart, 30);
  }
  function rollStart() {
    var ul1 = document.getElementById(newDataUl);
    var box = document.getElementById(newDataDiv);
    if (box.scrollTop >= ul1.scrollHeight) {
      box.scrollTop = 0;
    } else {
      box.scrollTop++;
    }
  }
}
posted @ 2019-11-12 14:51  岁月淡忘了谁  阅读(590)  评论(0编辑  收藏  举报