首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

原生JS轮播图插件

- Author -

前端工程师_钱成

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
Vue实现简单计算器
Jan 20 Vue.js
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
上海永华(1) A254(1) ICF-SW100(1) PR-D3L(1) 德劲1107(1) SRF-40W(1) SRF-22W(1) 安健(1) 华普R-96(1) YH-R296(1)
You might like
php实现mysql数据库备份类
2008/03/20 PHP
php 图片上传类代码
2009/07/17 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
Laravel find in set排序实例
2019/10/09 PHP
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
重学 JS：为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
详解jquery和vue对比
2019/04/16 jQuery
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python中下划线的使用方法
2015/03/27 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python 拼接文件路径的方法
2018/10/23 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python文档字符串（函数使用说明）使用详解
2019/07/30 Python
Python tornado上传文件的功能
2020/03/26 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
韩国知名的家庭购物网站：CJmall
2016/08/01 全球购物
Perfume’s Club法国站：购买香水和化妆品
2019/05/02 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
Python Socket编程详解
2021/04/25 Python
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技