原生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);