原生js实现列表内容向上滚动,列表内容向上轮播

<div id="review_box">
     <ul id="conent1">
        <li>第一条内容</li>
        <li>第二条内容</li>
        <li>第三条内容</li>
        <li>第四条内容</li>
        <li>第五条内容</li>
        <li>第六条内容</li>
    </ul>
    <ul id="conent2"></ul>
 </div>
 * {
      margin: 0;
      padding: 0;
  }
div {
     width: 100px;
     height: 60px; /* 必须 */
     overflow: hidden;/* 必须 */
     margin: 50px auto;
     border: 1px solid red;
     text-align: center;
 }
ul {
     list-style: none;
}
function scrollFun(t) {
     var con1 = document.getElementById("conent1");
     var con2 = document.getElementById("conent2");
     var conbox = document.getElementById("review_box");
     con2.innerHTML = con1.innerHTML;
     conbox.scrollTop = 0; // 开始无滚动时设为0
     var timer = setInterval(scrollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
     // 鼠标移进内容区域停止滚动
     conbox.onmouseover = function () {
         clearInterval(timer);
     }
     // 鼠标移出后继续滚动
     conbox.onmouseout = function () {
         timer = setInterval(scrollStart, t);
     }
}
 
// 开始滚动函数
function scrollStart() {
     var con1 = document.getElementById("conent1");
     var con2 = document.getElementById("conent2");
     var conbox = document.getElementById("review_box");
     // 不断给scrollTop的值+1,内容开始滚动,当滚动高度大于列表内容高度时恢复为0
     if (conbox.scrollTop >= con1.scrollHeight) {
         conbox.scrollTop = 0;
     } else {
         conbox.scrollTop++;
     }
}

scrollFun(100);

 

posted @ 2024-10-22 14:46  eternityQSL  阅读(33)  评论(0编辑  收藏  举报