直接復制下方代碼代到html文件保存,執行即可實現“JS自動無縫滾動圖片內容”
<!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>蝸牛網站優化網站建設</p>
</div>
<div id="colee2"></div>
</div>
<script type="text/javascript">
//速度設置
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(){
//當滾動至colee1與colee2交界時
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//設置定時器
//鼠標移上時清除定時器達到滾動停止的目的
colee.onmouseover=function() {clearInterval(MyMar1)}
//鼠標移開時重設定時器
colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
</body>
</html>
在實際項目應用過程當中,會可能會出現滾動執行成功,但是最終滾動只執行了一兩次的情況發生,如果發生此種情況,按如下步驟即可處理成功。
colee2.offsetTop-colee.scrollTop
把如上代碼替換成如下代碼,即可解決問題:
colee2.offsetHeight-colee.scrollTop
本文解決方案來自互聯網,如有相關疑問,可添加本站交通QQ群:83392417? 交通溝通解決。