原生JS轮播图插件
代码分两个部分：1、HTML部分，根据注释处理即可；2、play.js插件部分，引到HTML里面即可。
1、HTML部分：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<style>/*style标签及其内的内容，在实际项目中可以不要*/
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!--body标签里的内容，没说可以增减或更改的，不要增减或更改-->
<divid="box">
<div>
<!--以下是可增减区域-->
<div><imgsrc="img/banner1.jpg"alt=""/></div>
<div><imgsrc="img/banner2.jpg"alt=""/></div>
<div><imgsrc="img/banner3.jpg"alt=""/></div>
<div><imgsrc="img/banner4.jpg"alt=""/></div>
<div><imgsrc="img/banner5.jpg"alt=""/></div>
<div><imgsrc="img/banner6.jpg"alt=""/></div>
<div><imgsrc="img/banner7.jpg"alt=""/></div>
<!--以上是可增减区域-->
</div>
</div>
<scriptsrc="play.js"></script>
<script>
varplay=newBanner('1000px','500px');
/*这两个参数分别是轮播区的宽和高，可以根据需要更改*/
</script>
</body>
</html>
2、play.js插件部分
functionBanner(width,height){/*类*/
/*以下最外层div*/
varthat=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="0auto";
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(vari=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%";
}
/*以下是焦点区部分（定位在轮播区的右下方）*/
varoUl=document.createElement('ul');
for(i=0;i<this.aDiv.length-1;i++){
oUl.innerHTML+='<liclass='+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++){
varoA=document.createElement('a');
oA.href="javascript:;"rel="externalnofollow"
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="10pxsolidred";
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="10pxsolidred";
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){
varval=null;
varreg=null;
if(getComputedStyle){//标准浏览器
val=getComputedStyle(curEle,false)[attr];
}else{//非标准浏览器
if(attr==='opacity'){
val=curEle.currentStyle.filter;//'alpha(opacity=10)'
reg=/^alpha\(opacity[=:](\d+)\)$/i;
returnreg.test(val)?reg.exec(val)[1]/100:1;
}
val=curEle.currentStyle[attr];
}
reg=/^[+-]?((\d|([1-9]\d+))(\.\d+)?)(px|pt|rem|em)$/i;
returnreg.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;
}
varreg=/^(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()!=='[objectObject]')return;
for(varattrinoptions){
this.setCss(curEle,attr,options[attr]);
}
},
/*css：getCss、setCss、setGroupCss的合写*/
css:function(){
if(typeofarguments[1]==='string'){
if(typeofarguments[2]==='undefined'){
returnthis.getCss(arguments[0],arguments[1]);//当第三个参数不存在，是获取；
}else{
this.setCss(arguments[0],arguments[1],arguments[2]);//当第三个参数存在时，是设置；
}
}
if(arguments[1].toString()==='[objectObject]'){
this.setGroupCss(arguments[0],arguments[1]);//设置元素的一组属性值
}
},
/*animate：轮播图动画函数*/
animate:function(curEle,target,duration){
/*1.定义动画的运行轨迹*/
functiontmpEffect(t,b,c,d){
returnb+c/d*t;//开始时的位置+总变化/总时间*已经过去的时间
}
/*2.为公式的每个参数做准备*/
varbegin={};
varchange={};
for(varattrintarget){
begin[attr]=this.css(curEle,attr);
change[attr]=target[attr]-begin[attr];
}
duration=duration||700;
vartime=0;
varthat=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(varattrintarget){
varcurPos=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(vari=0;i<this.aLi.length;i++){
this.aLi[i].index=i;
varthat=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(){
vartmpStep=this.step>=this.aLi.length?0:this.step;
for(vari=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';
}
}
};
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！