码迷,mamicode.com
首页 > 其他好文 > 详细

6.2.20 无缝轮播图

时间:2018-07-22 00:29:53      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:absolute   clear   interval   title   children   dde   var   轮播图   rip   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			ul{list-style: none;}
			.box{
				width: 600px;
				height: 200px;
				margin: 50px auto;
				overflow: hidden;
				position: relative;

			}
			ul li{
				float: left;
			}
			.box ul{
				width: 400%;
				position: absolute;
				top: 0;
				left: 0;
				
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="images/01.jpg"/></li>
				<li><img src="images/02.jpg"/></li>
				<li><img src="images/03.jpg"/></li>
				<li><img src="images/04.jpg"/></li>
				
			</ul>
			<!--<div></div>
			<p></p>-->
			
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementsByClassName(‘box‘)[0];
		var ul = box.children[0];
		var num = 0;
		var timer = null;
		
		timer = setInterval(autoPlay,30)
		//函数的声明
		function autoPlay(){
			num--;
			
			num <=-600 ? num=0 : num ;
			ul.style.left = num + ‘px‘
			
		}
		//鼠标移动上去
		box.onmouseover = function(){
			clearInterval(timer)
		}
		box.onmouseout = function(){
			timer  = setInterval(autoPlay,30);
		}
		
		
	</script>
</html>

  

6.2.20 无缝轮播图

标签:absolute   clear   interval   title   children   dde   var   轮播图   rip   

原文地址:https://www.cnblogs.com/beallaliu/p/9348192.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!