js-小效果-无缝滚动
Posted HuangRong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-小效果-无缝滚动相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
list-style: none;
}
#box{
width:1102px;
position:relative;
height:152px;
overflow: hidden;
border:1px solid #000;
margin: 50px auto;
}
#ul{
position: absolute;
left:0;
top:0;
}
#ul li{
width:200px;
height:150px;
float:left;
padding:0 10px;}
#ul li img{
width:200px;
height:150px;
}
</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.length*aLi[0].offsetWidth+‘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="img/banner1.jpg" /></li>
<li><img src="img/banner2.jpg" /></li>
<li><img src="img/banner3.jpg" /></li>
<li><img src="img/banner4.jpg" /></li>
<li><img src="img/banner5.jpg" /></li>
</ul>
</div>
</body>
</html>
以上是关于js-小效果-无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章