[轮播图js代码]原生JS轮播图插件的教程

更新时间:2021-06-17    来源:js教程    手机版     字体:

【www.bbyears.com--js教程】

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

1、HTML部分:

 代码如下

  

<word">html lang="en"><word">head>  <meta charset="UTF-8">  <title>title>  <style>/*style标签及其内的内容,在实际项目中可以不要*/    * {      margin: 0;      padding: 0;    }  style>head><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插件部分

 代码如下

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 ="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(vari = 0; 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%";

  }

  /*以下是焦点区部分(定位在轮播区的右下方)*/

  varoUl=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[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="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) {

        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() !=='[object Object]')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() ==='[object Object]') {

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

        }

      }

    };

    本文来源:http://www.bbyears.com/wangyezhizuo/124234.html