无缝轮播的案例
Posted shangjun6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝轮播的案例相关的知识，希望对你有一定的参考价值。
无缝轮播的案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style>
*{
margin:0;
padding:0;
}
div{
width:1000px;
height:200px;
position:relative;
top:20px;
left:100px;
border:red 5px solid;
overflow: hidden;
}
ul{
width:2000px;
height:200px;
list-style: none;
position:absolute;
top:0;
left:-1020px;
}
ul>li{
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<div>
<ul id="ul">
<li style="background:pink"></li>
<li style="background:blue"></li>
<li style="background:orange"></li>
<li style="background:black"></li>
<li style="background:green"></li>
<li style="background:pink"></li>
<li style="background:blue"></li>
<li style="background:orange"></li>
<li style="background:black"></li>
<li style="background:green"></li>
</ul>
</div>
</body>
</html>
<script>
var ul=document.getElementById("ul")
var t=null;
var num=1;
t=setInterval(function(){
if (ul.offsetLeft<-ul.offsetWidth/2)
{
ul.style.left=0+"px";
}
ul.style.left=(ul.offsetLeft-num)+"px";
},100/6)
</script>
无缝轮播的解析：
1.无论什么时候，ul.offsetleft++ 无论什么时候，他的ul都要走
2.初始值，设立，直接设到第二板块那里
3.可以理解成，每次只走第二板块，因为每次需要第二板块 去覆盖掉，第一次模块走的东西
4.造成的视觉错觉
以上是关于无缝轮播的案例的主要内容，如果未能解决你的问题，请参考以下文章
轮播图采用jsjquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器