原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)

更新時間：2017年10月01日 09:24:29 作者：zouyang0921

下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

話說輪播圖效果是前端er學習JS的必經(jīng)之路啊，很多同學寫的第一個JS效果應該就是它了，在各大網(wǎng)站我們都會經(jīng)常見到，但是無縫滾動運動效果的輪播圖，對于小白們來說還是有一定難度的。

我們來看看思路吧~

首先我們要實現(xiàn)的效果有以下幾點：

小圓點：點擊小圓點顯示與之對應的圖片

向左和向右按鈕：點擊向左按鈕圖片向后運動，點擊向右按鈕圖片向前運動

定時器：每隔 2s 自動播放

主要難點在于：

當圖片運動到最后一張，點擊向右的按鈕時，應該顯示第一張；

當前顯示的是第一張，點擊向左的按鈕時，應該顯示最后一張；

思路：

1、先將第一張圖片復制添加到 ul 最后面，將最后一張圖片復制添加到 ul 最前面（此時 ul 的第一張圖片是pic3，最后一張圖片是pic0）；

2、當圖片(ul)運動到pic3，繼續(xù)向前運動，運動到最后一張pic0時，瞬間把 ul 拉回到第二張圖片pic0的位置，然后在繼續(xù)向前運動；

3、當圖片(ul)向后運動到第一張圖片pic3時，瞬間把 ul 拉回到倒數(shù)第二張圖片pic3的位置。

4、還有非常關鍵的一點：定義iNow變量，用于對應當前顯示的圖片與ol中的小圓點，并且可以用來關聯(lián) ul 的位置。

html代碼：

<div id="tab">
  <ul>
    <li><img src="image/pic0.jpg" alt="" /></li>
    <li><img src="image/pic1.jpg" alt="" /></li>
    <li><img src="image/pic2.jpg" alt="" /></li>
    <li><img src="image/pic3.jpg" alt="" /></li>
  </ul>
  <ol>
    <li class="on"></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="prev" id="prev"><</a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="next" id="next">></a>                 
</div>

css代碼：

*{margin: 0; padding: 0;}
li{ list-style: none;}
#tab{
  width: 670px;
  height: 240px;
  border: 1px solid #ccc;
  margin: 50px auto;
  position: relative;
}
#tab ul{
  width: 2680px;
  height: 240px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
#tab ul li{
  float: left;
  width: 670px;
}
#tab ul li img{
  width: 670px;
}
#tab ol{
  width: 80px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -40px;
  overflow: hidden;
}
#tab ol li{
  float: left;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 5px;
  cursor: pointer;
}
#tab ol .on{
  background: #f00;
}
#tab .prev,#tab .next{
  display: none;
  width: 40px;
  height: 60px;
  background: rgba(0,0,0,.3);
  filter:alpha(opacity:30);
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -30px;
}
#tab .prev{
  left: 0;
}
#tab .next{
  right: 0;
}

js 代碼：

其中animate()是封裝好的運動框架，最后面附有說明

window.onload = function(){
  var oTab = document.getElementById('tab');
  var oUl = oTab.getElementsByTagName('ul')[0];
  var aLi1 = oUl.children;
  var oOl = oTab.getElementsByTagName('ol')[0];
  var aLi2 = oOl.children;
  var prev = document.getElementById('prev');
  var next = document.getElementById('next');
  //設置ul的初始位置
  var iNow = 1;  
  oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
  //定時器
  var timer = null;

  //克隆第一張圖片 添加在ul的最后面
  var oLi1 = aLi1[0].cloneNode(true);
  //克隆最后一張圖片 添加在ul的最前面
  var oLi2 = aLi1[aLi1.length-1].cloneNode(true);
  oUl.appendChild(oLi1);
  oUl.insertBefore(oLi2,aLi1[0]);
  oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px";
  //鼠標移入tab: 關閉定時器，左右按鈕顯示
  oTab.onmouseover = function(){
    clearInterval(timer);
    prev.style.display = 'block';
    next.style.display = 'block';
  }
  //鼠標移出tab: 開啟定時器，左右按鈕隱藏
  oTab.onmouseout = function(){
    timer = setInterval(function(){
      toNext();
    },2000);
    prev.style.display = 'none';
    next.style.display = 'none';
  }
  //點擊小圓點
  for(var i=0;i<aLi2.length;i++){
    (function(index){
      aLi2[index].onclick = function(){
        iNow = index+1;
        for(var i=0;i<aLi2.length;i++){
          aLi2[i].className = '';
        }
        aLi2[index].className = 'on';
        animate(oUl,{left: -iNow*aLi1[0].offsetWidth});
      }
    })(i);
  }
  //上一個
  prev.onclick=function(){
    iNow--;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == 0){
        iNow = aLi1.length-2;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //下一個
  next.onclick=function(){
    toNext();
  }
  function toNext(){
    iNow++;
    animate(oUl,{left: -iNow*aLi1[0].offsetWidth},{complete:function(){
      if(iNow == aLi1.length-1){
        iNow = 1;
        oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
      }
      for(var i=0;i<aLi2.length;i++){
        aLi2[i].className = '';
      }
      aLi2[iNow-1].className = 'on';
    }});
  }
  //設置定時器
  timer = setInterval(function(){
    toNext();
  },2000);
}

封裝的animate()運動框架

/*
 * 參數(shù)說明:
 * obj: 運動對象
 * json(json形式): 需要修改的屬性
 * options(json形式): 
 *       duration: 運動時間
 *       easing: 運動方式（勻速、加速、減速）
 *       complete: 運動完成后執(zhí)行的函數(shù)
*/
function animate(obj,json,options){
  var options=options || {};        
  var duration=options.duration || 500;  //運動時間,默認值為500ms;
  var easing=options.easing || 'linear';  //運動方式,默認為linear勻速
  var start={};
  var dis={};

  for(var name in json){
    start[name]=parseFloat(getStyle(obj,name));  //起始位置
    dis[name]=json[name]-start[name];      //總距離
  }

  var count=Math.floor(duration/30);         //總次數(shù)
  var n=0;  //次數(shù)

  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
     if(n>count){
      clearInterval(obj.timer);
      options.complete && options.complete();
    }else{
      for(var name in json){
        switch(easing){
          //勻速
          case 'linear':
            var a=n/count;
            var cur=start[name]+dis[name]*a;  //當前位置
            break;
          //加速
          case 'ease-in':
            var a=n/count;
            var cur=start[name]+dis[name]*a*a*a;
            break;
          //減速
          case 'ease-out':
            var a=1-n/count;
            var cur=start[name]+dis[name]*(1-a*a*a);
            break;
        }
         if(name=='opacity'){
          obj.style.opacity=cur;
          obj.style.filter = 'alpha(opacity='+cur*100+')';  //兼容IE8及以下
        }else{
          obj.style[name]=cur+'px';
        }
      }
    }
    n++;
  },30);
}
//獲取非行間樣式
function getStyle(obj,sName){
  return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}

以上這篇原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: