JavaScript：滚动效果

文末有完整示例代码  参考视频

4张图片轮流滚动，把四张图片放在4个<li>标签中，代码如下：

<body>
	<div id="div1">
		<ul id="ul1">
			<li><img src="./landscape/00.jpg"></li>
			<li><img src="./landscape/11.jpg"></li>
			<li><img src="./landscape/22.jpg"></li>
			<li><img src="./landscape/33.jpg"></li>
		</ul>
	</div>
</body>

下面在<style>中去掉默认的padding和margin，并且设置每个<li>的格式

*{
	margin: 0px;
	padding: 0px;
}
li{
	float: left;
	width: 250px;
	height: 130px;
	list-style: none;
}

每个<li>的宽度是250px，整个div的宽度应该设置为1000px，高度保持130px，使用margin: 200px auto;居中，位置属性设置为relative，溢出hidden

	#div1{
		width: 1000px;
		height: 130px;
		margin: 200px auto;
		position: relative;
		background-color: transparent;
		overflow: hidden;
	}

<ul>本身的属性：位置属性设置为absolute，并且左、上坐标为0px

	ul{
		position: absolute;
		left: 0;
		top: 0;
	}

主要代码

<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementsByTagName("ul")[0];
	var aLi = document.getElementsByTagName("li");
	//获取ul对象，获取aLi对象

	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
	oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
	//将四张图片拓展为八张，同时重新设置ul宽度

	function move(){
		if(oUl.offsetLeft < -oUl.offsetWidth/2)
		{
			oUl.style.left = 0;
		}
		if(oUl.offsetLeft>0)
		{
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft-2+"px";
	}

	var timer = setInterval(move,30);

	//以下代码作用：鼠标移到ul上面，暂停滚动；移开继续滚动
	oUl.onmouseover = function(){
		clearInterval(timer);
	}
	oUl.onmouseout = function(){
		timer = setInterval(move,30);
	}
}
</script>

完整示例代码

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#div1{
		width: 1000px;
		height: 130px;
		margin: 200px auto;
		position: relative;
		background-color: transparent;
		overflow: hidden;
	}
	ul{
		position: absolute;
		left: 0;
		top: 0;
	}
	li{
		float: left;
		width: 250px;
		height: 130px;
		list-style: none;
	}
</style>
<script type="text/javascript">
window.onload = function(){
	var oUl = document.getElementsByTagName("ul")[0];
	var aLi = document.getElementsByTagName("li");
	//获取ul对象，获取aLi对象

	oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
	oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
	//将四张图片拓展为八张，同时重新设置ul宽度

	function move(){
		if(oUl.offsetLeft < -oUl.offsetWidth/2)
		{
			oUl.style.left = 0;
		}
		if(oUl.offsetLeft>0)
		{
			oUl.style.left = -oUl.offsetWidth/2+'px';
		}
		oUl.style.left = oUl.offsetLeft-2+"px";
	}

	var timer = setInterval(move,30);

	//以下代码作用：鼠标移到ul上面，暂停滚动；移开继续滚动
	oUl.onmouseover = function(){
		clearInterval(timer);
	}
	oUl.onmouseout = function(){
		timer = setInterval(move,30);
	}
}
</script>
</head>
<body>
	<div id="div1">
		<ul>
			<li><img src="./landscape/00.jpg"></li>
			<li><img src="./landscape/11.jpg"></li>
			<li><img src="./landscape/22.jpg"></li>
			<li><img src="./landscape/33.jpg"></li>
		</ul>
	</div>
</body>
</html>

 

posted @ 2020-02-08 18:05  昨夜昙花  阅读(21)  评论(0)    收藏  举报