标签：padding 解析 har 轮播 tin 初始 add ati 视觉
无缝轮播的案例：
<!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.造成的视觉错觉
标签：padding 解析 har 轮播 tin 初始 add ati 视觉
原文地址：https://www.cnblogs.com/shangjun6/p/10615133.html
