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

无缝滚动

时间:2016-11-08 01:04:38      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:off   int   position   osi   tin   meta   rip   stc   type   

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
position: relative;
width: 1100px;
height: 220px;
overflow: hidden;
border: 1px solid black;
margin: 50px auto;
}
#box ul{
position: absolute;
left: 0;
}
#box ul li{
width: 200px;
height: 200px;
padding: 10px;
float: left;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById(‘box‘);
var oUl = document.getElementById(‘ul‘);
var aLi = oUl.children;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth*aLi.length + ‘px‘;
setInterval(function(){
var l = oUl.offsetLeft - 5;
if(l <= -oUl.offsetWidth/2){
l = 0;
}
oUl.style.left = l + ‘px‘;
},30)
}
</script>
</head>
<body>
<div id="box">
<ul id="ul">
<li><img src="image/1.jpg"width="200px" height="200px"></li>
<li><img src="image/2.jpg"width="200px" height="200px"></li>
<li><img src="image/3.jpg"width="200px" height="200px"></li>
<li><img src="image/4.jpg"width="200px" height="200px"></li>
<li><img src="image/5.jpg"width="200px" height="200px"></li>
</ul>
</div>
</body>
</html>
 
 
 
好文要顶 

无缝滚动

标签:off   int   position   osi   tin   meta   rip   stc   type   

原文地址:http://www.cnblogs.com/wang1593840378/p/6041043.html

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