标签：over highlight charset utf-8 oat inner 速度 text oct
实现现图片的无缝滚动就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。
js中关于定时器的方法有两种：setTimeout和setInterval。它们接收的参数是一样的，第一个参数是函数，用于定时器的执行，第二个参数是数字，表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数，而setInterval则每隔规定的时间就执行一次指定的函数。
在定时器后面我们还要知道清除定时器的方法：clearTimeout和clearInterval。它们都只接收一个参数，即定时器返回的值，用于消除指定的定时器。
知道定时器以后我们就要想办法让图片动起来，让图片元素按一定的速度移位就能实现。可以用js控制元素的样式
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片无缝滚动</title>
<style>
*{margin:0; padding:0;}
#div1{width:750px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul{position:absolute; left:0; top:0;}
#div1 ul li{ float:left; width:150px; height:220px; list-style:none;}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById(‘div1‘);//获取div
var oUl=oDiv1.getElementsByTagName(‘ul‘)[0];//获取ul
var aLi=oUl.getElementsByTagName(‘li‘);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//复制一份div内容
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";//ul宽度设置为 单个图片宽度*图片数量
setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=‘0‘; //图片每移动 到整个div宽度的 1/2 时重置 为0
}
oUl.style.left=oUl.offsetLeft-2+"px"; //图片向右移动 每0.03秒移动2px
},30)
};
</script>
</head>
<body>
<div id="div1">
<ul>
<!-- 图片要求大小格式相同 --->
<li><img src="img/0.png" /> </li>
<li><img src="img/1.png" /> </li>
<li><img src="img/2.png" /> </li>
<li><img src="img/3.png" /> </li>
<li><img src="img/4.png" /> </li>
</ul>
</div>
</body>
</html>
测试结果：
标签：over highlight charset utf-8 oat inner 速度 text oct
原文地址：https://www.cnblogs.com/hnz666/p/9255201.html
