开发插件，本人这里采用的是模块化开发方式（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