广告滚动效果

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