原生JS轮播图插件


Posted in Javascript onFebruary 09, 2017

代码分两个部分: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';
    }
  }
};

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

Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
javascript Keycode对照表
Oct 24 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 #Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php截取字符串函数分享
2015/02/02 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
用vue写一个日历
2020/11/02 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python算法中的时间复杂度问题
2019/11/19 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
高一地理教学反思
2014/01/18 职场文书
企业标语口号
2014/06/10 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
受资助学生感谢信
2015/01/21 职场文书
社区服务活动报告
2015/02/05 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2015年消防工作总结
2015/04/24 职场文书
学生病假条怎么写
2015/08/17 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL