第一個JS外掛——輪播圖
阿新 • • 發佈：2018-12-18
開發外掛，本人這裡採用的是模組化開發方式（Module），確保記憶體中只有一個物件引用，這樣可以節省記憶體，也可以使程式碼簡潔高效。
// 這裡採用（）（）這種自呼叫函式，形成閉包，內部函式是一個匿名函式，防止外掛使用者定義函式與外掛衝突。 (function(){ "use strict"; var _options = { name: '白雲', age: '18' }; var sliderPlugin = { myFunc: function(){ console.log('黑土'); return this; }, mySec: function(str = _options.name){ console.log(str); return this; } } this.sliderPlugin = sliderPlugin; })(); //這種方式的呼叫方式就是window.sliderPlugin.myFunc();
還有一種方式，是要考慮不同環境：
(function(definition){ "use strict"; if(typeof exports === "object" && typeof module === "object"){ //如果是 commonJS環境裡面 module.exports = definition(); }else if(typeof define === "function" && define.amd){ // requireJS環境裡面 define(definition); }else if(typeof window !== "undefined" || typeof self !== "undefined"){ // 正常window環境裡面 var global = typeof window !== "undefined" ? window : self; global.sliderPlugin= definition(); }else{ throw new Error("This environment was not anticipated by plugin,Please file a bug.") } })(function(){ function sliderPlugin(){ // 返回一些引數和api return { name: 'image silder plugin', createEelement: createEelement }; } // 判斷是否是HTMLElement function isHtmlControl(obj) { var d = document.createElement("div"); try{ d.appendChild(obj.cloneNode(true)); return obj.nodeType==1 ? true : false; }catch(e){ return obj == window || obj == document; } } // 建立dom function createEelement(options){ if(isHtmlControl(options.wrapper)){ createStyle(); // 建立輪播圖骨架 var dom = '<ul class="image-slider">', dotDom = `<div class="dot">`, imageArray = options.imageArray, wrapper = options.wrapper, time = options.time; if((imageArray instanceof Array) && imageArray.length > 0 ){ length = imageArray.length; for(var i = 0; i < length; i++){ dom += `<li class="image-slider-item"> <img src="` + imageArray[i] + `"> </li>`; dotDom += `<span class="dot-item"></span>`; } //將第一張圖片多插入一次 dom += `<li class="image-slider-item"> <img src="` + imageArray[0] + `"> </li>` dom += '</ul>'; dotDom += '</div>'; wrapper.innerHTML = dom + dotDom; wrapper.style = "position: relative;overflow:hidden;";//?此時如果外面wrapper沒有設定高度，這裡面的就是0。 var doc = document, domUL = doc.getElementsByTagName('ul')[0], domLi = doc.getElementsByTagName('li'), domImg = doc.getElementsByTagName('img'), domDot = doc.getElementsByTagName('span'), _width = wrapper.offsetWidth, _height = wrapper.offsetHeight; // 設定下面點的樣式，預設選中第一個 domDot[0].style.background = '#e0c6c6'; // 自動輪播，每隔2秒播放一張圖 var index = 0, moveDistance = _width; var timer = setInterval(function(){ autoMove(domUL, length); },time || '2000') // 事件冒泡，滑動的是li wrapper.onmouseenter = function(){ // 當滑鼠放上去的時候，清除自動滾動（也就是清除計時器） clearInterval(timer); } wrapper.onmouseleave = function(){ timer = setInterval(function(){ autoMove(domUL,length); },time || '2000') } }else{ throw new Error('請提供圖片陣列！'); } // 圖片開始輪播 function autoMove(element,length){ if(isHtmlControl(element)){ var json = { left: element.offsetLeft - moveDistance }; index++; // 移動圖片 move(element,json,function(){ if(index == length){ // 當翻到最後一張之後，迴圈重新來 index = 0; element.style.left = '0px'; } // 還原其他圓點的樣式 // 改變下面的圓點樣式 for(var d of domDot){ d.style.background = '#959090'; } domDot[index].style.background = '#e0c6c6'; }); } } // 每張圖片具體移動方式 function move(elem, json,callback){ var speed ,cur;// speed表示移動的步長，cur表示現在距離左邊的距離 elem.timer = setInterval(function(){ var bStop = true; for(var prop in json){ cur = parseInt(getStyle(elem, prop)); // 滑動速度 speed = (json[prop]-cur)/7; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); elem.style[prop] = cur+ speed + 'px'; json[prop] !== cur ? bStop = false : bStop = true; if(bStop){ // 一張圖片翻過去之後觸發 clearInterval(elem.timer); typeof callback == 'function'? callback() : ''; } } },30); } // 返回當前元素的style樣式 function getStyle(elem, prop) { if(elem.currentStyle){ return elem.currentStyle[prop]; }else{ return window.getComputedStyle(elem, null)[prop]; } } // 建立樣式表 function createStyle(){ var doc = document, style = doc.createElement('style'); style.type = 'text/css'; style.innerHTML = `*{ margin: 0; padding: 0; } .image-slider{ display: table; word-break: keep-all; white-space:nowrap; height: 100%; list-style: none; position: relative; } .image-slider-item,.image-slider-item img{ width: 100%; } .image-slider-item{ display: inline-block; } .dot{ position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; text-align: center; } .dot-item{ display: inline-block; width: 8px; height: 8px; background: #959090; border-radius: 100%; margin: 5px; }`; doc.getElementsByTagName('head')[0].appendChild(style); } }else { throw new Error('error!HTMLElement is need!'); } } return sliderPlugin(); });
用法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>測試js</title> <script type="text/javascript" src="./sliderPlugin.js"></script> </head> <body> <div class="wrapper"></div> <script type="text/javascript"> var imageArray = ['./img/1.jpg','./img/2.jpg','./img/3.jpg']; if(window.sliderPlugin){ var doc = document, wrapper = doc.querySelector('.wrapper'); sliderPlugin.createEelement({wrapper:wrapper,imageArray:imageArray}); } </script> </body> </html>
github和npm上面都有，可自行下載安裝。
github上面js-slider-plugin