JS輪播圖中緩動函數的封裝-js教程-PHP中文網

首頁

web前端

js教程

JS輪播圖中緩動函數的封裝

高洛峰

Jan 16, 2017 pm 02:37 PM

輪播圖的根本其實就是緩動函數的封裝，如果說輪播圖是一輛跑動的汽車，那麼緩動函數就是它的發動機，今天本文章就帶大家由簡入繁，封裝屬於自己的緩動函數~~

我們從需求的角度開始，首先給出一個簡單需求：

1、我想讓頁面中的一個盒子從開始的位置勻速向右運動到200px的地方，該怎麼實現？

分析：

1）我們需要知道盒子在哪個地方，這個可以透過offsetLeft屬性去取得；

2）要讓盒子勻速運動，對於js肯定需要setInterval了；

3）要讓盒子向右邊勻速運動，對於js肯定需要setInterval了；

3）要讓盒子往右邊跑起來？那就是需要不停改變盒子與左邊起始點的距離，有margin-left，還有定位的left，這裡我選擇了改變絕對定位的left；

4）跑到離開始點200px的距離我們要停下來，使用clearInterval就可以了。

接下來直接上代碼了　　

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }
   div {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
   }
   input {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: yellowgreen;
   }
 
  </style>
 </head>
 
 <body>
  <div></div>
  <input type="button" value="移动到200" />
 
 
  <script type="text/javascript">
   // 获取到元素（这里有个小细节，如果给元素设置了id名，即便不使用获取元素的方法，也能通过这个id名获取到元素哦~~大家可以自己尝试一下）
   var btn = document.querySelector(&#39;input&#39;),
     dv = document.querySelector(&#39;div&#39;);
   // 添加点击事件
   btn.addEventListener(&#39;click&#39;,function() {
    var timer = null,// 保存定时器
      currentDistance = dv.offsetLeft, // 当前离父盒子的距离
      step = 8,// 每次改变的距离
      target = 200;// 目标距离
    timer = setInterval(function() {
     currentDistance += step;// 当前距离 = 上一个当前距离 + 改变的距离
     if((target - currentDistance) < step) { 
      currentDistance = target; // 如果目标距离与当前距离的差小于了要改变的距离，这时候我们就直接让当前距离等于目标距离，防止盒子停下来的时候有误差
      clearInterval(timer); // 清楚定时器
      timer = null; // 将timer解绑，释放内存
     }
     dv.style.left = currentDistance + &#39;px&#39;; // 最核心的一步，改变盒子的left为当前距离
    },17)
   })
  </script>
 </body>
</html>

2、一個初步運動的效果實現了，那麼接下來我們改進了需求：

盒子運動到200px的位置後，我們要讓盒子繼續運動到400px的位置？

分析：

1）、這時候要有兩個按鈕點擊，一個運動到200px，一個運動到400px

2）、雖然有兩個運動，但是其使用的功能都是一樣，都是從一個點移動到另一個點，所以我們考慮將1中的運動封裝一個函數，以便重複使用。

上代碼~　　　

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>Document</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
 }
 div {
  position: absolute;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
 }
 input {
  width: 100px;
  height: 30px;
  color: #fff;
  background-color: yellowgreen;
 }
 
 </style>
</head>
 
<body>
 <div></div>
 <input type="button" value="移动到200" />
 <input type="button" value="移动到400" />
 <script type="text/javascript">
 // 封装函数，盒子和目标距离都是不确定的，我们可以将他们作为参数传递。
 function animation(tag,target) {
  var timer = null,
   currentDistance = tag.offsetLeft,
   step = 5;
  step = currentDistance < target? step: -step;// 判断step的正负，200到400时是递增，400到200时是递减
  timer = setInterval(function() {
  if(Math.abs(currentDistance - target) > Math.abs(step)) { // 这里判断条件也要略作改动，使用绝对值进行比较
   currentDistance += step; /
   tag.style.left = currentDistance + &#39;px&#39;;
  }else {
   tag.style.left = target + &#39;px&#39; // 当当前距离与目标距离之间的差值小于step改变的距离时，我们直接让盒子移动到目标距离。
   clearInterval(timer);
   timer = null;
  }
  },17)
 }
 var btns = document.querySelectorAll(&#39;input&#39;),
  dv = document.querySelector(&#39;div&#39;);
 btns[0].addEventListener(&#39;click&#39;,function() {
  animation(dv,200);
 })
 btns[1].addEventListener(&#39;click&#39;,function() {
  animation(dv,400);
 })
 </script>
</body>
</html>

3、盒子來回運動的函數我們封裝好了，但是我們再想一下輪播圖的滾動效果，它並不是勻速移動，而是最開始很塊，在接近滾動完成時，速度又逐漸減低。

需求：讓盒子緩動（也就是變速運動）　

上代碼~　　　　

function animation(tag,target) {
  var timer = null;
  timer = setInterval(function() {
  var currentDistance = tag.offsetLeft,
   step = (target - currentDistance) / 5;// 通过目标距离与当前距离的差除以5便达到了我们需要的变速运动，因为step每次定制器执行都要改变，所以放入定时器内
  step = step > 0 ? Math.ceil(step):Math.floor(step);// 这里如果将currentDistance定时器外面声明可以不用写，如果放在定时器内声明，因为offsetLeft取整的特性，要对step进行取整
  if(Math.abs(currentDistance - target) > Math.abs(step)) {
   currentDistance += step;
   tag.style.left = currentDistance + &#39;px&#39;;
  }else {
   tag.style.left = target + &#39;px&#39;
   clearInterval(timer);
   timer = null;
  }
  },17)

好了，一個輪播圖需要的最基本的緩動函數完成了~

好了這裡補充一個比較完整的緩緩函數：它的功能更全面一點，可以同時更改多樣式。

function perfectAnimate(tag, obj, fn) {// 传三个参数，运动的盒子，对象（可以传多个属性），回调函数（在执行完后可以再执行自定义的功能）
 clearInterval(tag.timer);// 这里将定时器作为tag标签的属性保存，可以多次调用函数清除上一个定时器。
 tag.timer = setInterval(function () {
  var flag = true;
  for (var k in obj) {
　　　　　　　// 因为并不是所有属性都带px单位，所以这里进行判断分别设置 
   if (k == &#39;opacity&#39;) {
    var currentDistance = getStyle(tag, k) * 100,
     target = obj[k] * 100,
     step = (target - currentDistance) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    currentDistance += step;
    tag.style[k] = currentDistance / 100;
   } else if (k == &#39;zIndex&#39;) {
    tag.style[k] = obj[k];
   else {
    var currentDistance = parseInt(getStyle(tag, k)) || 0,
     target = obj[k],
     step = (target - currentDistance) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    currentDistance += step;
    tag.style[k] = currentDistance + &#39;px&#39;;
   }
   if (target != currentDistance) {
    flag = false // 只要还有属性没有运动完成，就不会清楚定时器
   }
  }
  if (flag) {
   clearInterval(tag.timer)
   fn && fn();// 所有定时器走完，这里执行回调函数，短路操作避免不传回调函数也不会报错。
  }
 }, 17)
}

// 获取样式的兼容函数，上面的缓动函数的依赖
function getStyle(tag, attr) {
 if (tag.currentStyle) {
  return tag.currentStyle[attr];
 } else {
  return getComputedStyle(tag, null)[attr];
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

🎜更多JS輪播圖中緩動函數的封裝相關文章請關注PHP中文網！ 🎜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。