(20)JS实现简单的图片向左无缝滚动

    思路:设置两副重复的图,然后滚动到头的时候将ul的offsetLeft设置为0,但是每次只显示四个,所以看不见那一瞬间的变化,一切近乎完美,代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;}
#div1 ul{position: absolute;left: 0;top: 0;}
#div1 ul li{float:left;width:178px;height:108px;list-style: none;}
</style>

<script type="text/javascript">
window.onload=function(){
 	var oDiv=document.getElementById('div1');
 	var oUl=oDiv.getElementsByTagName('ul')[0];
 	var aLi=oUl.getElementsByTagName('li');

 	oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//变成两副图,然后才能实现无缝滚动

 	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//随便获取一个li的宽度,这里用第一个代表计算出ul的长度
 	setInterval(function(){
 		if(oUl.offsetLeft<-oUl.offsetWidth/2){//offsetLeft是负数,而offsetWidth是一个最小大于0的数,所以加个-号才能进行比较
 			oUl.style.left='0';//当所有图片滚动完之后将left设置为0意味着后面无缝地接着第一张图片,这个过程如果看见两副图片就会看见有些变化,但实际上只会看见一副,所以几乎没有变化
 		}
 		oUl.style.left=oUl.offsetLeft-2+'px';//每次向左移动2px

 	},30);
};
	
</script>
</head>
<body>
	<div id="div1">
		<ul>
			<li><img src="images/1.jpg"/></li>
			<li><img src="images/2.jpg"/></li>
			<li><img src="images/3.jpg"/></li>
			<li><img src="images/4.jpg"/></li>
		</ul>
	</div>
	

</body>
</html>

效果图如下:

(20)JS实现简单的图片向左无缝滚动_第1张图片

(20)JS实现简单的图片向左无缝滚动_第2张图片


你可能感兴趣的:((20)JS实现简单的图片向左无缝滚动)