广告滚动效果

html:

<div class="ad">
<ul class="info1">
<li><p><span class="bungle"></span><span>广告信息一</span></p></li>
<li><p><span class="bungle"></span><span>广告信息二</span></p></li>
</ul>
<ul class="info2"></ul>
</div>

js:

//公告滚动效果添加
var ad=document.getElementsByClassName("ad").item(0);
var info1=document.getElementsByClassName("info1").item(0);
var info2=document.getElementsByClassName("info2").item(0);
var height=info1.firstElementChild.offsetHeight;
//console.log(height);
info2.innerHTML=info1.innerHTML;
var timer=null;
ad.scrollTop=0;
function startTimer(){
timer=setInterval(scrollUp,0.25);
ad.scrollTop++;
}
function scrollUp(){
if(ad.scrollTop%(height)==0){
clearInterval(timer);
setTimeout(startTimer,4000);
}else{
ad.scrollTop++;
if(ad.scrollTop>=info1.offsetHeight){
ad.scrollTop=0;
}
}
}
startTimer();

原文地址:https://www.cnblogs.com/wanan-01/p/7426424.html