完美的纯js无缝左右文字滚动,自适应宽度,废话不多说,直接上代码,
<div id="slider">
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</div>
<script>
var box = document.getElementById("slider");
var ul = box.getElementsByTagName("ul")[0];//获取ul
var lis = ul.getElementsByTagName("li");//获取所有的li元素
var speed = 2;//速度
ul.innerHTML += ul.innerHTML;//相当于克隆
ul.style.width = lis.length*lis[0].offsetWidth+'px';//计算赋值ul的宽度
//滚动方法
function move (){
// 如果当前left值 <= 负ul/2的宽度 给left值重新定位成0
if(ul.offsetLeft<=-ul.offsetWidth/2){
ul.style.left = "0";
}
//像左边滚动
ul.style.left = ul.offsetLeft - speed + 'px';
}
//定时器
var timer = setInterval(move,30);
//鼠标经过控制暂停滚动
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(move,30);
}
</script>