直接復(fù)制下方代碼代到html文件保存,執(zhí)行即可實(shí)現(xiàn)“JS自動(dòng)無縫滾動(dòng)圖片內(nèi)容”
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;">
<div id="colee1">
<p>woniuseo.com</p>
<p>www.znccw.com</p>
<p>woniuseo.cn</p>
<p>www.woniuseo.cn</p>
<p>蝸牛網(wǎng)站優(yōu)化網(wǎng)站建設(shè)</p>
</div>
<div id="colee2"></div>
</div>
<script type="text/javascript">
//速度設(shè)置
var speed=10;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2
function Marquee1(){
//當(dāng)滾動(dòng)至colee1與colee2交界時(shí)
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//設(shè)置定時(shí)器
//鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
</body>
</html>
在實(shí)際項(xiàng)目應(yīng)用過程當(dāng)中,會(huì)可能會(huì)出現(xiàn)滾動(dòng)執(zhí)行成功,但是最終滾動(dòng)只執(zhí)行了一兩次的情況發(fā)生,如果發(fā)生此種情況,按如下步驟即可處理成功。
colee2.offsetTop-colee.scrollTop
把如上代碼替換成如下代碼,即可解決問題:
colee2.offsetHeight-colee.scrollTop
本文解決方案來自互聯(lián)網(wǎng),如有相關(guān)疑問,可添加本站交通QQ群:83392417? 交通溝通解決。
轉(zhuǎn)載請(qǐng)注明:?蝸牛SEO? ? JS自動(dòng)滾動(dòng)圖片內(nèi)容代碼,JS無縫滾動(dòng)只滾動(dòng)兩次就自動(dòng)停止了是什么原因,怎么解決?