原生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 @   eternityQSL  阅读(174)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

喜欢请打赏

扫描二维码打赏

支付宝打赏

点击右上角即可分享
微信分享提示