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

最新推荐文章于 2024-03-28 22:39:07 发布

iris w

最新推荐文章于 2024-03-28 22:39:07 发布

阅读量173

点赞数

分类专栏：第一个月html css js jq

本文链接：https://blog.csdn.net/qq_39509597/article/details/78865025

版权

第一个月html css js jq 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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张是一样的，所以看上去就和循环滚动没有什么差别

iris w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017-11-21 循环滚动 js方法

无标题文档 ul{ margin: 0px; padding: 0px; list-style: none; width: 1280px; } li{ float: left; } #div1{ margin: 0px auto; width: 320px; height: 80px; overflow: hidden; }
复制链接

扫一扫

专栏目录