直接復(fù)制下方代碼代到html文件保存，執(zhí)行即可實(shí)現(xiàn)“JS自動無縫滾動圖片內(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></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)滾動至colee1與colee2交界時
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//設(shè)置定時器
//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠標(biāo)移開時重設(shè)定時器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
</body>
</html>
在實(shí)際項(xiàng)目應(yīng)用過程當(dāng)中，會可能會出現(xiàn)滾動執(zhí)行成功，但是最終滾動只執(zhí)行了一兩次的情況發(fā)生，如果發(fā)生此種情況，按如下步驟即可處理成功。
colee2.offsetTop-colee.scrollTop把如上代碼替換成如下代碼，即可解決問題：
colee2.offsetHeight-colee.scrollTop本文解決方案來自互聯(lián)網(wǎng)，如有相關(guān)疑問，可添加本站交通QQ群：83392417? 交通溝通解決。
轉(zhuǎn)載請注明：?蝸牛SEO? ? JS自動滾動圖片內(nèi)容代碼，JS無縫滾動只滾動兩次就自動停止了是什么原因，怎么解決？
