原生JS轮播图插件

代码分两个部分：1、HTML部分，根据注释处理即可；2、play.js插件部分，引到HTML里面即可。
1、HTML部分：

<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*style标签及其内的内容，在实际项目中可以不要*/* {margin: 0;padding: 0;}</style></head><body><！--body标签里的内容，没说可以增减或更改的，不要增减或更改--><div id="box"><div><！--以下是可增减区域--><div><img src="img/banner1.jpg" alt=""/></div><div><img src="img/banner2.jpg" alt=""/></div><div><img src="img/banner3.jpg" alt=""/></div><div><img src="img/banner4.jpg" alt=""/></div><div><img src="img/banner5.jpg" alt=""/></div><div><img src="img/banner6.jpg" alt=""/></div><div><img src="img/banner7.jpg" alt=""/></div><！--以上是可增减区域--></div></div><script src="play.js"></script><script>var play= new Banner（"1000px", "500px"）;/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/</script></body></html>

2、play.js插件部分

function Banner（width, height） {/*类*//*以下最外层div*/var that = this;this.width = width;this.height = height;this.oBox = document.getElementById（"box"）;this.oBox.style.width = width;this.oBox.style.height = height;this.oBox.style.margin = "0 auto";this.oBox.style.overflow = "hidden";this.oBox.style.position = "relative";/*以下轮播区的div*/this.oBoxInner = this.oBox.getElementsByTagName（"div"）[0];this.oBoxInner.style.height = height;this.oBoxInner.style.position = "absolute";this.oBoxInner.style.left = 0;this.oBoxInner.style.right = 0;this.aDiv = this.oBoxInner.getElementsByTagName（"div"）;//单个轮播图this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/;this.oBoxInner.style.width = parseFloat（width） * this.aDiv.length + "px";//轮播区的宽度for （var i = 0; i < this.aDiv.length; i++） {/*遍历轮播区的每个div及其内部的图片*/this.aDiv[i].style.width = width;this.aDiv[i].style.height = height;this.aDiv[i].style.float = "left";this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName（"img"）[0];this.aDiv[i].aImg.style.width = "100%";this.aDiv[i].aImg.style.height = "100%";}/*以下是焦点区部分（定位在轮播区的右下方）*/var oUl=document.createElement（"ul"）;for（i=0; i<this.aDiv.length-1; i++）{oUl.innerHTML+="<li class="+i+"===1?"on":null></li>";}this.oBox.appendChild（oUl）;this.oUl = this.oBox.getElementsByTagName（"ul"）[0];this.oUl.style.position = "absolute";this.oUl.style.right = "10px";this.oUl.style.bottom = "10px";this.aLi = this.oUl.getElementsByTagName（"li"）;for （i = 0; i < this.aLi.length; i++） {/*遍历焦点区的每个焦点*/this.aLi[i].style.width = "18px";this.aLi[i].style.height = "18px";this.aLi[i].style.float = "left";this.aLi[i].style.listStyle = "none";this.aLi[i].style.background = "green";this.aLi[i].style.borderRadius = "50%";this.aLi[i].style.marginLeft = "10px";this.aLi[i].style.cursor = "pointer";}/*以下是向左向右两个箭头式按钮*/for（i=0; i<2; i++）{var oA=document.createElement（"a"）;oA.href="javascript:;" rel="external nofollow" this.oBox.appendChild（oA）;}/*以下是左按钮（点击它，图片向左运动）*/this.oBtnL = this.oBox.getElementsByTagName（"a"）[0];this.oBtnL.style.width = "30px";this.oBtnL.style.height = "30px";this.oBtnL.style.position = "absolute";this.oBtnL.style.top = （parseFloat（this.height） / 2 - 15） + "px";this.oBtnL.style.left = "30px";this.oBtnL.style.border = "10px solid red";this.oBtnL.style.borderLeft = "none";this.oBtnL.style.borderBottom = "none";this.oBtnL.style.opacity = "0.3";this.oBtnL.style.filter = "alpha（opacity=30）";this.oBtnL.style.display = "none";this.oBtnL.style.transform = "rotate（-135deg）";this.oBtnL.onclick = function （） {if （that.step <= 0） {that.step = that.aDiv.length - 1;that.css（that.oBoxInner, "left", -that.step * parseFloat（that.width））;}that.step--;that.animate（that.oBoxInner, {left: -that.step * parseFloat（that.width）}）;that.bannerTip（）;};/*以下是右按钮（点击它，图片向右运动）*/this.oBtnR = this.oBox.getElementsByTagName（"a"）[1];this.oBtnR.style.width = "30px";this.oBtnR.style.height = "30px";this.oBtnR.style.position = "absolute";this.oBtnR.style.top = （parseFloat（this.height） / 2 - 15） + "px";this.oBtnR.style.right = "30px";this.oBtnR.style.border = "10px solid red";this.oBtnR.style.borderLeft = "none";this.oBtnR.style.borderBottom = "none";this.oBtnR.style.opacity = "0.3";this.oBtnR.style.filter = "alpha（opacity=30）";this.oBtnR.style.display = "none";this.oBtnR.style.transform = "rotate（45deg）";this.oBtnR.onclick = function （） {if （that.step >= that.aDiv.length - 1） {that.step = 0;that.css（that.oBoxInner, "left", 0）}that.step++;that.animate（that.oBoxInner, {left: -that.step * parseFloat（that.width）}, 1000）;that.bannerTip（）;};/*以下是其它*/this.step = 0;//记录每次运动this.timer = null;//定时器this.init（）;//初始化轮播图}Banner.prototype = {//类的原型constructor: Banner,/*getCss：获取元素的属性值*/getCss: function （curEle, attr） {var val = null;var reg = null;if （getComputedStyle） {//标准浏览器val = getComputedStyle（curEle, false）[attr];} else {//非标准浏览器if （attr === "opacity"） {val = curEle.currentStyle.filter; //"alpha（opacity=10）"reg = /^alpha（opacity[=:]（d+））$/i;return reg.test（val） ? reg.exec（val）[1] / 100 : 1;}val = curEle.currentStyle[attr];}reg = /^[+-]?（（d|（[1-9]d+））（.d+）?）（px|pt|rem|em）$/i;return reg.test（val） ? parseInt（val） : val;},/*setCss：设置元素的属性值*/setCss: function （curEle, attr, value） {if （attr === "float"） {curEle.style.cssFloat = value;curEle.style.styleFloat = value;return;}if （attr === "opacity"） {curEle.style.opacity = value;curEle.style.filter = "alpha（opacity=" + （value * 100） + "）";return;}var reg = /^（width|height|top|right|bottom|left|（（margin|padding）（top|right|bottom|left）?））$/i;if （reg.test（attr）） {if （！（value === "auto" || value.toString（）.indexOf（"%"） ！== -1）） {value = parseFloat（value） + "px";}}curEle.style[attr] = value;},/*setGroupCss：设置元素的一组属性值*/setGroupCss: function （curEle, options） {if （options.toString（） ！== "[object Object]"） return;for （var attr in options） {this.setCss（curEle, attr, options[attr]）;}},/*css：getCss、setCss、setGroupCss的合写*/css: function （） {if （typeof arguments[1] === "string"） {if （typeof arguments[2] === "undefined"） {return this.getCss（arguments[0], arguments[1]）;//当第三个参数不存在，是获取；} else {this.setCss（arguments[0], arguments[1], arguments[2]）;//当第三个参数存在时，是设置；}}if （arguments[1].toString（） === "[object Object]"） {this.setGroupCss（arguments[0], arguments[1]）;//设置元素的一组属性值}},/*animate：轮播图动画函数*/animate: function （curEle, target, duration） {/*1.定义动画的运行轨迹*/function tmpEffect（t, b, c, d） {return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间}/*2.为公式的每个参数做准备*/var begin = {};var change = {};for （var attr in target） {begin[attr] = this.css（curEle, attr）;change[attr] = target[attr] - begin[attr];}duration = duration || 700;var time = 0;var that = this;/*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/clearInterval（curEle.timer）; //开起一个定时器前，先关闭没用的定时器curEle.timer = setInterval（function （） {time += 10;/*4.定时器停止运动的条件（time>=duration）*/if （time >= duration） {that.css（curEle, target）;clearInterval（curEle.timer）;return;}/*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/for （var attr in target） {var curPos = tmpEffect（time, begin[attr], change[attr], duration）;that.css（curEle, attr, curPos）;}}, 10）},/*初始化轮播图*/init: function （） {var _this = this;/*1.开启自动轮播*/this.timer = setInterval（function （） {_this.autoMove（）;}, 2000）;/*2.开启焦点，每个焦点与每张轮播图对应*/this.bannerTip（）;/*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/this.over_out（）;/*4.点击焦点，响应对应的轮播图片*/this.handleChange（）;},handleChange: function （） {for （var i = 0; i < this.aLi.length; i++） {this.aLi[i].index = i;var that = this;this.aLi[i].onclick = function （） {that.step = this.index;that.animate（that.oBoxInner, {left: -that.step * parseFloat（that.width）}）;that.bannerTip（）;}}},autoMove: function （） {if （this.step >= this.aDiv.length - 1） {this.step = 0;this.css（this.oBoxInner, "left", 0）}this.step++;this.animate（this.oBoxInner, {left: -this.step * parseFloat（this.width）}, 1000）;this.bannerTip（）;},bannerTip: function （） {var tmpStep = this.step >= this.aLi.length ? 0 : this.step;for （var i = 0; i < this.aLi.length; i++） {this.aLi[i].className = i === tmpStep ? "on" : null;if （this.aLi[i].className === "on"） {this.aLi[i].style.background = "red";} else {this.aLi[i].style.background = "green";}}},over_out: function （） {var _this = this;_this.oBox.onmouseover = function （） {clearInterval（_this.timer）;_this.oBtnL.style.display = "block";_this.oBtnR.style.display = "block";};_this.oBox.onmouseout = function （） {_this.timer = setInterval（function （） {_this.autoMove（）}, 2000）;_this.oBtnL.style.display = "none";_this.oBtnR.style.display = "none";}}};

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！