欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生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';
    }
  }
};

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