无缝滑动——基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
       #div1 {
           width: 300px;
           height: 50px;
           background: #cccccc;
           position: absolute;
           left: 0;
       }
        #btn{
            margin: 10px;
        }
 </style>
    <script>

window.onload=function () {
var oDiv=document.getElementById('div1');
var oBtn=document.getElementById('btn');
   var timer='none';
var oBtn1=document.getElementById('btn1');

    oBtn.onclick=function() {
       timer=setInterval(function () {
            oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
        }, 300)
    };
    oBtn1.onclick=function () {
        clearInterval(timer);
    }
}
    </script>
</head>
<body>
<input type="button" id="btn" value="向右移动">
<input type="button" id="btn1" value="停止移动">
<div id="div1"></div>
</body>

</html>

用的技术主要是offsetLeft（用来改变位置的，本身来说就是一个数字）和setInterval（用来重复执行的）

效果图：

1.无缝滚动原理
让ul运动
overflow：hidden；超过了就隐藏
position: absolute;运动的物体就要绝对定位
ul多宽：所有宽度的总和
oul.style.width=ali[0].offsetWidth*ali.length+'px';
实现左右没有缝隙的滚动：
自己复制自己一份，然后又丢给自己
oul.innerHTML+=oul.innerHTML;
这样就多了一份li,想要实现无缝连接，等到这个li走完的时候，让下一个li直接拉回到开头
如下图所示，到达位置5的时候，再拉到位置1

if(oul.offsetLeft<-oul.offsetWidth/2){
oul.style.left='0px';
}

设置按钮，向左向右滚动是不同的