原生JS轮播图插件
程序员文章站
2024-02-02 21:26:58
代码分两个部分：1、html部分，根据注释处理即可；2、play.js插件部分，引到html里面即可。
1、html部分：
代码分两个部分：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';
}
}
};
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： php+mysql事务rollback&commit示例
下一篇： 自媒体必会的软文标题写作技巧