JavaScript js無間斷滾動效果 scrollLeft方法 使用模闆
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> 無間斷滾動scrollLeft套用模闆 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
#外層div的id值{width:px; height:px; overflow:hidden;border:0px solid #ccc;}
#内層div的id值{width:px;}
#圖檔組1的id值,#圖檔組2的id值{width:px;float:left;}
#圖檔組1的id值 img,#圖檔組2的id值 img{width:px;height:px;}
</style>
</head>
<body>
<div id="外層div的id值">
<div id="内層div的id值">
<div id="圖檔組1">
<img src="http://blog.163.com/[email protected]/blog/../images/xxxx/img1.jpg">
<img src="http://blog.163.com/[email protected]/blog/../images/xxxx/img2.jpg">
<img src="http://blog.163.com/[email protected]/blog/../images/xxxx/img3.jpg">
<img src="http://blog.163.com/[email protected]/blog/../images/xxxx/img4.jpg">
</div>
<div id="圖檔組2"></div>
</div>
</div>
<script>
(function(){
var 變量名1 = document.getElementById("外層div的id值");
var img1 = document.getElementById("圖檔組1的id值");
var img2 = document.getElementById("圖檔組2的id值");
var imgs =變量名1.getElementsByTagName('img');
var timer1 = null;//計時器1，控制滾動
var timer2 = null;//計時器2，控制停止後的重滾
img2.innerHTML = img1.innerHTML;//将img1中的html标簽放置于img2中
function imgScroll(){
if(變量名1.scrollLeft >= img2.offsetWidth){
變量名1.scrollLeft=0;
}else{
變量名1.scrollLeft+=3;//控制左滾距離
}
stopScroll();
}
timer1 = setInterval(imgScroll,25);
function stopScroll(){
if(變量名1.scrollLeft%imgs[0].offsetWidth == 0)
{
clearInterval(timer1);
timer2 = setTimeout('timer1 = setInterval(imgScroll,25)',1000);
}
}
})();
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/zywf/p/4669580.html