<!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
让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';
}
设置按钮，向左向右滚动是不同的
