我们来看下无缝滚动的原理如下图
id="a"(以下简称a,id="b"简称为b)为轮播的可视部分,b为轮播部分,b_1为轮播内容,但b_2和b_1要在同一行上,因为轮播的原理就是利用scrollLeft不断累加的方式实现,当b_2滚动完的时候,从b_1开始继续滚动。
鼠标控制动画效果
1 <script type="text/javascript" language="javascript"> 2 //代码开始 3 4 var x=document.getElementById("a"); 5 //自定义变量x,getElementById是通过id获取对象。你可以理解为:将document.getElementById("a") 6 //这段代码缩写为x了。这里的x你可以随便换。在这里不定义x也行不过后面的代码会麻烦点。 7 var y=document.getElementById("b_1"); 8 var z=document.getElementById("b_2"); 9 z.innerHTML=y.innerHTML; 10 function test() { 11 //自定义函数test,test可以随便换,值为空。 12 if (x.scrollLeft>=z.offsetWidth){ 13 //如果,x的scrollLeft值大于等于z的offsetWidth。 14 //scrollLeft的值也就是scrollbar移动的值, 15 16 //offsetWidth是对象可视宽度。也就是z包括边框在内的宽度,因为y和z的宽度是一样的 17 //所以,你这里可以把z改成y,或者直接改成z的宽度效果是一样的 18 19 x.scrollLeft=0; 20 //x的scrollLeft值等于x的scrollLeft值减去y的offsetWidth值。 21 //其实当y完全滚动完成的时候,x的scrollLeft值和y的offsetWidth值是相等的。 22 //所以这段代码意思就是x.scrollLeft=0 。 23 //这里y.offsetWidth你可以换成z.offserWidth或者y的宽度值,如果换成零,去掉减号。 24 //看到这里你也许会有点明白了吧?无缝滚动,其实就是不断重复滚动第一个层. 25 //当b_1滚动的时候,如果没有"双胞胎"的b_2,滚动的时候将显示一个b_1宽的空白 26 //所以,如果没有overflow:hidden属性的话,滚动跟下面这张图是一样的 27 }else{ 28 //否则 29 x.scrollLeft++; 30 //x的scrollLeft值累加,实现移动 31 } 32 }
最后设置鼠标放上去停止,鼠标移开继续
1 var run = setInterval(test,10); 2 //自定义run,setInter是在规定的时间内重复调用函数,直到用clearInterval终止 3 //这句代码的意思是,每1毫秒执行一次test,每隔1毫秒x的scrollLeft值加1 4 //所以数值越大滚动越慢 5 6 x.οnmοuseοver=function() {clearInterval(run)}; 7 //当鼠标划过x的时候,终止run。滚动停止 8 9 x.οnmοuseοut=function() {run=setInterval(test,10)}; 10 //当鼠标离开x,继续执行test,时间为1毫秒。 11 </script>