offsetleft和定时器实现无缝连接的滚动效果

       今天学习的内容,他的主要原理是等着图片滚动,滚动到一半时再把它扯回来,实际也就是说是一个障眼法。 具体由oul.style.left=-oul.offsetWidth/2;(注意负值)实现了扯回来的效果。offsetLeft 获取的是相对于父对象的左边距。其中预先使用 clearInterval(timer);的目的是防止重复点击速度加快。

代码很多都不是用offsetleft写的,网上找了一下找到了,可以更容易的理解定时器。

主要思路是

1.计算图片列表ul的宽度

2.开启定时器,使其向左边距不断增大,造成向左运动的效果

3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0。向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度)。(拉的瞬间很快,用户察觉不到,造成一种无缝滚动的假象)

4.offsetLeft值的正负决定往哪边移动

5.放到图片上停止这个定时器,移开再开启


无缝滚动效果


window.onload=function(){

 varodiv=document.getElementById('div');

 varoul=odiv.getElementsByTagName('ul')[0];

 varoli=oul.getElementsByTagName('oul');

 varbtn=document.getElementsByTagName('btn');

 varispeed=-1;

 vartimer=null;

 oul.innerHTML+=oul.innerHTML; //图片列表复制一份

 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话,运动过程中后面的会先出现再加载图片,有一种不流畅感,切图片过多会分行,由外面的div决定宽度

 timer=setInterval(function(){

  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft输出的是数字不带单位,右边也用oul.style.left输出的是字符串,而不是数值,而且它取得是行间样式,无用

  if(oul.offsetLeft<-oul.offsetWidth/2){ //判断时也可以用.style.left或.style.width?(不确定)

   oul.style.left=0;

  }

  elseif(oul.offsetLeft>0){

   oul.style.left=-oul.offsetWidth/2;

  }

 ),30};

 btn[0].onmouseover=function(){

  ispeed=-1;

 };

 btn[1].onmouseover=function(){

  ispeed=1;

 };

 oul.onmouseover=function(){

  clearInterval(timer);

 };

 oul.onmouseout=function(){

  timer=setInterval(function(){

   oul.style.left=oul.offsetLeft+ispeed+'px';

   if(oul.offsetLeft<-oul.offsetWidth/2){

    oul.style.left=0;

   }

   elseif(oul.offsetLeft>0){

    oul.style.left=-oul.offsetWidth/2;

   }

  ),30}; //如果把速度变大,而定时器的时间也变大是否可以达到相同效果呢?答案是不能。会变成一卡一卡

 };

};

你可能感兴趣的:(offsetleft和定时器实现无缝连接的滚动效果)