多张图片滚动例子

最新推荐文章于 2022-12-08 22:28:36 发布

WQLi

最新推荐文章于 2022-12-08 22:28:36 发布

阅读量2k

点赞数

文章标签：多张图片滚动

<!DOCTYPE html>
<html>
<head>
	<title>滚动测试</title>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<style type="text/css">
	#window{
		width: 100%;
		height: 300px;
		background: #333;
		overflow: hidden;
	}
	#rool{
		height: 300px;
		padding: 0px;
		margin: 0px;
	}
	#rool li{
		list-style: none;
		float: left;
	}
	#rool li img{
		padding: 10px;
		float: left;
		width: 350px;
		height: 280px;
	}
	</style>
</head>
<body>
	<div id="window">
		
		<ul id="rool">
			<li><img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg"/></li>
			<li><img src="http://img05.tooopen.com/images/20140404/sy_58241958989.jpg"/></li>
			<li><img src="http://img.zcool.cn/community/01690955496f930000019ae92f3a4e.jpg@2o.jpg"/></li>
			<li><img src="http://img2.imgtn.bdimg.com/it/u=2197008343,3428021375&fm=200&gp=0.jpg"/></li>
			<li><img src="http://img3.imgtn.bdimg.com/it/u=1243131531,3821032402&fm=27&gp=0.jpg"/></li>
		</ul>
			
	</div>	
</body>
<script type="text/javascript">
	
	//获取当前ul下li在一排所占用的宽度
	$("#rool").width($("#rool li").width()*($("#rool li").length));
	//记录此宽度
	var UlWidth=$("#rool").width();
	//复制所需滚动内容*2
	$("#rool").width($("#rool").width()*2);
	$("#rool").append($("#rool").html());
 
	//记录当前滚动距离
	var readysRoll=0;
	var speed=5;
 
	//移动li
	function myScroll(){
		if(readysRoll<=UlWidth){
			$("#window").scrollLeft(readysRoll++);
		}else{	//当以滚动的距离和一遍lu的长度相等时，重置滚动距离，实现无限滚动
			readysRoll=0;  
		}		
	}
	
 
	var MyRoll=setInterval(myScroll,speed); 
 
	//鼠标移上停止滚动
	$("#rool").mouseover(function(){
		clearInterval(MyRoll);
	});
	$("#rool").mouseout(function(){
		MyRoll=setInterval(myScroll,speed);
	})
</script>
</html>