博客

2017-11-21 循环滚动 js方法

  • Post author:
  • Post category:其他


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	ul{
		margin: 0px;
		padding: 0px;
		list-style: none;
		width: 1280px;
	}
	
	li{
		
		float: left;
	}
	
	
	#div1{
		margin: 0px auto;
		width: 320px;
		height: 80px;
		overflow: hidden;
	}
	</style>

<script type="text/javascript">
	var tm;
	setTimeout(add,2000);
	
	function add(){
		tm = setInterval("gd(1)",10);
	}
	

	
	function mid(){
		tm = setInterval("gd(2)",10);
	}
	
	function sub(){
		tm = setInterval("gd(3)",10);
	}
	
		function sup(){
		tm = setInterval("gd(0)",10);
	}
	
	function gd(type){
		var v = document.getElementById("div1");
		
		if(type == 1){
			v.scrollLeft++;
			if(v.scrollLeft>=320){
				clearInterval(tm);
				setTimeout(mid,2000);
			}
		}else if(type == 2){
			v.scrollLeft++;
			if(v.scrollLeft>=640){
				clearInterval(tm);
				setTimeout(sub,2000);
			}
		}else if(type == 3){
			v.scrollLeft++;
			if(v.scrollLeft>=960){
				clearInterval(tm);
				setTimeout(sup,1990);
			}
		}else{
			v.scrollLeft = 0;
			if(v.scrollLeft<=0){
				clearInterval(tm);
				setTimeout(add,10);
			}
		}	
	}
	</script>
</head>

<body>


<div id = "div1">
<ul>
	<li>
		<img src="../images2/index/ad_btm_01.jpg">
	</li>
	<li>
		<img src="../images2/index/ad_btm_02.jpg">
	</li>
	<li>
		<img src="../images2/index/ad_btm_03.jpg">
	</li>
	<li>
		<img src="../images2/index/ad_btm_01.jpg">
	</li>
</ul>

</div>
</body>
</html>



    
   



    2秒一次水平无限滚动，实际是一共有4张，第3张到第4张时第4张会自动跳到第1张，而第4张和第1张是一样的，所以看上去就和循环滚动没有什么差别
   



    
   




 






版权声明：本文为qq_39509597原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。