原生JS輪播圖插件
更新時(shí)間：2017年02月09日 16:30:27 作者：前端工程師_錢(qián)成
本文主要介紹了原生JS輪播圖插件。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
代碼分兩個(gè)部分：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)容，沒(méi)說(shuō)可以增減或更改的，不要增減或更改-->
<div id="box">
<div>
<!--以下是可增減區(qū)域-->
<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>
<!--以上是可增減區(qū)域-->
</div>
</div>
<script src="play.js"></script>
<script>
var play= new Banner('1000px', '500px');
/*這兩個(gè)參數(shù)分別是輪播區(qū)的寬和高，可以根據(jù)需要更改*/
</script>
</body>
</html>
2、play.js插件部分
function Banner(width, height) {/*類(lèi)*/
/*以下最外層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');//單個(gè)輪播圖
this.oBoxInner.innerHTML/* 輪播區(qū)的內(nèi)部后面*/ += this.aDiv[0].outerHTML/*第一個(gè)輪播圖片的外部*/;
this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//輪播區(qū)的寬度
for (var i = 0; i < this.aDiv.length; i++) {/*遍歷輪播區(qū)的每個(gè)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ū)的每個(gè)焦點(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";
}
/*以下是向左向右兩個(gè)箭頭式按鈕*/
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)動(dòng)）*/
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)動(dòng)）*/
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)動(dòng)
this.timer = null;//定時(shí)器
this.init();//初始化輪播圖
}
Banner.prototype = {//類(lèi)的原型
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的合寫(xiě)*/
css: function () {
if (typeof arguments[1] === 'string') {
if (typeof arguments[2] === 'undefined') {
return this.getCss(arguments[0], arguments[1]);//當(dāng)?shù)谌齻€(gè)參數(shù)不存在，是獲?。?
} else {
this.setCss(arguments[0], arguments[1], arguments[2]);//當(dāng)?shù)谌齻€(gè)參數(shù)存在時(shí)，是設(shè)置；
}
}
if (arguments[1].toString() === '[object Object]') {
this.setGroupCss(arguments[0], arguments[1]);//設(shè)置元素的一組屬性值
}
},
/*animate：輪播圖動(dòng)畫(huà)函數(shù)*/
animate: function (curEle, target, duration) {
/*1.定義動(dòng)畫(huà)的運(yùn)行軌跡*/
function tmpEffect(t, b, c, d) {
return b + c / d * t;//開(kāi)始時(shí)的位置+總變化/總時(shí)間*已經(jīng)過(guò)去的時(shí)間
}
/*2.為公式的每個(gè)參數(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.開(kāi)啟一個(gè)定時(shí)器，讓時(shí)間不斷累加；根據(jù)時(shí)間和公式，求出最新的位置；*/
clearInterval(curEle.timer); //開(kāi)起一個(gè)定時(shí)器前，先關(guān)閉沒(méi)用的定時(shí)器
curEle.timer = setInterval(function () {
time += 10;
/*4.定時(shí)器停止運(yùn)動(dòng)的條件（time>=duration）*/
if (time >= duration) {
that.css(curEle, target);
clearInterval(curEle.timer);
return;
}
/*5.拿到每個(gè)屬性的最新值，并且賦值給元素對(duì)應(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.開(kāi)啟自動(dòng)輪播*/
this.timer = setInterval(function () {
_this.autoMove();
}, 2000);
/*2.開(kāi)啟焦點(diǎn)，每個(gè)焦點(diǎn)與每張輪播圖對(duì)應(yīng)*/
this.bannerTip();
/*3.鼠標(biāo)移入輪播區(qū)，輪播暫停；鼠標(biāo)移出輪播區(qū)，輪播恢復(fù)*/
this.over_out();
/*4.點(diǎn)擊焦點(diǎn)，響應(yīng)對(duì)應(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';
}
}
};
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JavaScript 錯(cuò)誤處理與調(diào)試經(jīng)驗(yàn)總結(jié)
在Web開(kāi)發(fā)過(guò)程中，編寫(xiě)JavaScript程序時(shí)或多或少會(huì)遇到各種各樣的錯(cuò)誤，有語(yǔ)法錯(cuò)誤，邏輯錯(cuò)誤。如果是一小段代碼，可以通過(guò)仔細(xì)檢查來(lái)排除錯(cuò)誤，但如果程序稍微復(fù)雜點(diǎn)，調(diào)試JS便成為一個(gè)令Web開(kāi)發(fā)者很頭痛的問(wèn)題。2010-08-08
wxs相當(dāng)于一個(gè)獨(dú)立模塊,相當(dāng)于一個(gè)獨(dú)立出來(lái)的module對(duì)象,通過(guò)module.exports向外暴露,在文件中引入即可使用,下面這篇文章主要給大家介紹了關(guān)于微信小程序中wxs文件的一些妙用,需要的朋友可以參考下2022-01-01
基于javascript實(shí)現(xiàn)數(shù)字英文驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)數(shù)字英文驗(yàn)證碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)鼠標(biāo)移入方向感知，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊
這篇文章主要介紹了詳解使用uni-app開(kāi)發(fā)微信小程序之登錄模塊，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了webpack中的模式(mode)使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要為大家分享了JS制作類(lèi)似于選項(xiàng)卡切換的年歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript將list轉(zhuǎn)換成樹(shù)狀結(jié)構(gòu)的實(shí)例
下面小編就為大家?guī)?lái)一篇javascript將list轉(zhuǎn)換成樹(shù)狀結(jié)構(gòu)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這是一篇譯文，實(shí)例分析制作自定義的信息提示框的實(shí)現(xiàn)代碼2009-01-01