代碼分兩個部分：1、HTML部分，根據(jù)注釋處理即可；2、play.js插件部分，引到HTML里面即可。
1、HTML部分：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>/*style標(biāo)簽及其內(nèi)的內(nèi)容，在實(shí)際項(xiàng)目中可以不要*/ * { margin: 0; padding: 0; } </style></head><body><!--body標(biāo)簽里的內(nèi)容，沒說可以增減或更改的，不要增減或更改--><div id="box"> <div> <!--以下是可增減區(qū)域--> <div><img src="img/banner1.jpg" <div><img src="img/banner2.jpg" <div><img src="img/banner3.jpg" <div><img src="img/banner4.jpg" <div><img src="img/banner5.jpg" <div><img src="img/banner6.jpg" <div><img src="img/banner7.jpg" <!--以上是可增減區(qū)域--> </div></div><script src="play.js"></script><script> var play= new Banner('1000px', '500px'); /*這兩個參數(shù)分別是輪播區(qū)的寬和高，可以根據(jù)需要更改*/</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"; /*以下輪播區(qū)的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/* 輪播區(qū)的內(nèi)部后面*/ += this.aDiv[0].outerHTML/*第一個輪播圖片的外部*/; this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//輪播區(qū)的寬度 for (var i = 0; i < this.aDiv.length; i++) {/*遍歷輪播區(qū)的每個div及其內(nèi)部的圖片*/ 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%"; } /*以下是焦點(diǎn)區(qū)部分（定位在輪播區(qū)的右下方）*/ 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++) {/*遍歷焦點(diǎn)區(qū)的每個焦點(diǎn)*/ 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); } /*以下是左按鈕（點(diǎn)擊它，圖片向左運(yùn)動）*/ 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(); }; /*以下是右按鈕（點(diǎn)擊它，圖片向右運(yùn)動）*/ 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;//記錄每次運(yùn)動 this.timer = null;//定時器 this.init();//初始化輪播圖}Banner.prototype = {//類的原型 constructor: Banner, /*getCss：獲取元素的屬性值*/ getCss: function (curEle, attr) { var val = null; var reg = null; if (getComputedStyle) {//標(biāo)準(zhǔn)瀏覽器 val = getComputedStyle(curEle, false)[attr]; } else {//非標(biāo)準(zhǔn)瀏覽器 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：設(shè)置元素的屬性值*/ 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：設(shè)置元素的一組屬性值*/ 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]);//當(dāng)?shù)谌齻€參數(shù)不存在，是獲取； } else { this.setCss(arguments[0], arguments[1], arguments[2]);//當(dāng)?shù)谌齻€參數(shù)存在時，是設(shè)置； } } if (arguments[1].toString() === '[object Object]') { this.setGroupCss(arguments[0], arguments[1]);//設(shè)置元素的一組屬性值 } }, /*animate：輪播圖動畫函數(shù)*/ animate: function (curEle, target, duration) { /*1.定義動畫的運(yùn)行軌跡*/ function tmpEffect(t, b, c, d) { return b + c / d * t;//開始時的位置+總變化/總時間*已經(jīng)過去的時間 } /*2.為公式的每個參數(shù)做準(zhǔn)備*/ 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.開啟一個定時器，讓時間不斷累加；根據(jù)時間和公式，求出最新的位置；*/ clearInterval(curEle.timer); //開起一個定時器前，先關(guān)閉沒用的定時器 curEle.timer = setInterval(function () { time += 10; /*4.定時器停止運(yùn)動的條件（time>=duration）*/ if (time >= duration) { that.css(curEle, target); clearInterval(curEle.timer); return; } /*5.拿到每個屬性的最新值，并且賦值給元素對應(yīng)的屬性；*/ 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.開啟焦點(diǎn)，每個焦點(diǎn)與每張輪播圖對應(yīng)*/ this.bannerTip(); /*3.鼠標(biāo)移入輪播區(qū)，輪播暫停；鼠標(biāo)移出輪播區(qū)，輪播恢復(fù)*/ this.over_out(); /*4.點(diǎn)擊焦點(diǎn)，響應(yīng)對應(yīng)的輪播圖片*/ 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'; } }};以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網(wǎng)！
新聞熱點(diǎn)
疑難解答
