快捷導(dǎo)航

完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（下篇）

更新時(shí)間：2020年04月20日 11:07:22 作者：macanfa

這篇文章主要介紹了完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖的具體代碼，基于完美運(yùn)動(dòng)框架move2.js實(shí)現(xiàn)的焦點(diǎn)錄播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

繼續(xù)上一篇的學(xué)習(xí)完美實(shí)現(xiàn)八種js焦點(diǎn)輪播圖（上篇），供大家參考，具體內(nèi)容如下

5.定時(shí)上下無縫滾動(dòng)

思路：

1.思路1： 將ul復(fù)制一份，但滾動(dòng)一半距離重新歸位；（大型網(wǎng)站性能略低）；
2.思路2： 通過相對(duì)定位,將第一個(gè)li移動(dòng)到最后，再將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;//針對(duì)按鈕的值
 var iNow2=0;//用于滾動(dòng)
 var timer=null;
 for(var i=0;i<aLi_o.length;i++){
 aLi_o[i].index=i;
 aLi_o[i].onmouseover=function(){
  for(var i=0;i<aLi_o.length;i++){
  aLi_o[i].className='';

  this.className='active';
  //建立關(guān)系：很重要
  iNow=this.index;
  iNow2=this.index;

  startMove(oUl,{top:-this.index*LiHeight});
  }
 };

 }
 timer=setInterval(toRun,2000);
 oBox.onmouseover=function(){
 clearInterval(timer);
 };
 oBox.onmouseout=function(){
 timer=setInterval(toRun,2000);
 };
 function toRun(){
 if(iNow==0){
  //還原li并把ul歸位
  aLi_u[0].style.position='static';
  oUl.style.top=0;
  //記得把iNow2還原
  iNow2=0;
 }
 if(iNow==aLi_o.length-1){
  //將第一個(gè)Li移到最后
  iNow=0;
  aLi_u[0].style.position='relative';
  aLi_u[0].style.top=aLi_u.length*LiHeight+'px';
 }else{
  iNow++;
 }
 iNow2++;
 for(var i=0;i<aLi_o.length;i++){
  aLi_o[i].className='';
 }
 aLi_o[iNow].className='active';
 startMove(oUl,{top:-iNow2*LiHeight});
 }
};

效果圖：

6.左右無縫切換效果

思路：
1.絕對(duì)定位：除第一個(gè)外的所有Li定位到右邊，比較索引值與當(dāng)前索引，定位要出現(xiàn)的li位置。
2.加入“開關(guān)”或“時(shí)間間隔”等來控制運(yùn)動(dòng)切換頻率!

 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;
 //除第一項(xiàng)外所有定位到右邊
 for(var i=1;i<aLi_u.length;i++){
 aLi_u[i].style.left=LiWidth+'px';
 }

 for(var i=0;i<aLi_o.length;i++){
 aLi_o[i].index=i;

 aLi_o[i].onmouseover=function(){

  if(bBtn){
  bBtn=false;
  for(var i=0;i<aLi_o.length;i++){
   aLi_o[i].className='';
  }
  this.className='active';
  //判斷左移右移
  if(iNow<this.index){
   //定位要出現(xiàn)的li
   aLi_u[this.index].style.left=LiWidth+'px';
   //將當(dāng)前l(fā)i移走
   startMove(aLi_u[iNow],{left:-LiWidth});
  }else if(iNow>this.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;//只有當(dāng)前運(yùn)動(dòng)完才可進(jìn)行下一次運(yùn)動(dòng)
  });
  //將當(dāng)前索引賦值
  iNow=this.index;

  }//開關(guān)if結(jié)束


 };

 }
};

效果圖：

7.手風(fēng)琴效果

1.思路1：通過改變li寬度來制作；
2.思路2：除第一項(xiàng)外的所有l(wèi)i按等距間隔定位，觸發(fā)事件后等距變換位置

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

 //除第一項(xiàng)外所有定位
 for(var i=1;i<aLi_u.length;i++){
 //等距30px定位
 aLi_u[i].style.left=(470-3*40)+(i-1)*30+'px';
 }
 for(var i=0;i<aLi_u.length;i++){
 aLi_u[i].index=i;
 aLi_u[i].onmouseover=function(){
  for(var i=0;i<aLi_u.length;i++){
  if(i<=this.index){
  //小于索引的全部左排列
   startMove(aLi_u[i],{left:i*30});
  }else{//大于索引的全部右排列
   startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
  }
  }
 }
 }
};

效果圖：

8.手風(fēng)琴效果2

在之前的基礎(chǔ)上均勻定位Li!

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

 //除第一項(xiàng)外所有定位
 for(var i=1;i<aLi_u.length;i++){
 aLi_u[i].style.left=num*i+'px';
 }
 for(var i=0;i<aLi_u.length;i++){
 aLi_u[i].index=i;
 aLi_u[i].onmouseover=function(){
  for(var i=0;i<aLi_u.length;i++){
  if(i<=this.index){
   startMove(aLi_u[i],{left:i*30});
  }else{
   startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30});
  }
  }
 };
 aLi_u[i].onmouseout=function(){
  for(var i=0;i<aLi_u.length;i++){
  startMove(aLi_u[i],{left:num*i});
  }
 };
 }
};

效果圖：