完美实现八种js焦点轮播图（下篇）

继续上一篇的学习完美实现八种js焦点轮播图（上篇），供大家参考，具体内容如下

5.定时上下无缝滚动

思路：

1.思路1： 将ul复制一份，但滚动一半距离重新归位；（大型网站性能略低）；
2.思路2： 通过相对定位,将第一个li移动到最后，再将ul和Li归位。

window.onload=function(){
 var oBox=document.getElementById('box');
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var oOl=document.getElementById('ol');
 var aLi_o=oOl.getElementsByTagName('li');
 var LiHeight=aLi_u[0].offsetHeight;
 var iNow=0;//针对按钮的值
 var iNow2=0;//用于滚动
 var timer=null;
 for(var i=0;i

效果图：

6.左右无缝切换效果
思路：

 1.绝对定位：除第一个外的所有Li定位到右边，比较索引值与当前索引，定位要出现的li位置。

 2.加入“开关”或“时间间隔”等来控制运动切换频率!



 window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var oOl=document.getElementById('ol');
 var aLi_o=oOl.getElementsByTagName('li');
 var LiWidth=aLi_u[0].offsetWidth;
 var iNow=0;
 var bBtn=true;
 //除第一项外所有定位到右边
 for(var i=1;ithis.index){
   aLi_u[this.index].style.left=-LiWidth+'px';
   startMove(aLi_u[iNow],{left:LiWidth});
  }

  startMove(aLi_u[this.index],{left:0},function(){
   bBtn=true;//只有当前运动完才可进行下一次运动
  });
  //将当前索引赋值
  iNow=this.index;

  }//开关if结束


 };

 }
};


效果图：

7.手风琴效果
 1.思路1：通过改变li宽度来制作；

 2.思路2：除第一项外的所有li按等距间隔定位，触发事件后等距变换位置 

window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');

 //除第一项外所有定位
 for(var i=1;i

效果图：

8.手风琴效果2
在之前的基础上均匀定位Li!

window.onload=function(){
 var oUl=document.getElementById('ul');
 var aLi_u=oUl.getElementsByTagName('li');
 var num=Math.ceil(470/aLi_u.length);//每个的宽度

 //除第一项外所有定位
 for(var i=1;i

效果图：

精彩专题分享：jQuery图片轮播 Javascript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。