html轮播图脚本之家,原生JS轮播图插件

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

1、HTML部分：

* {

margin: 0;

padding: 0;

}

var play= new Banner('1000px', '500px');

/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/

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

oUl.innerHTML+='

';

}

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';

}

}

};

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