首页
所有分类
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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
location(2) keeplive_timeout(1) 双向链表(6) NumPy(2) TypeScript(2) RTMP(1) 区块链(2) zabbix(9) text-shadow(1) 模拟登录(1)
You might like
第五章 php数组操作
2011/12/30 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
教大家制作简单的php日历
2015/11/17 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
重定向实现代码
2006/11/20 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[01:38]完美世界DOTA2联赛（PWL）宣传片：第一站
2020/10/26 DOTA
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
树莓派采用socket方式文件传输（python）
2019/06/22 Python
基于Python函数和变量名解析
2019/07/19 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
世界上最好的威士忌和烈性酒购买网站：The Whisky Exchange
2016/11/20 全球购物
HearthSong官网：儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
出国留学担保书
2014/05/20 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
golang中的并发和并行
2021/05/08 Golang
Python学习之迭代器详解
2022/04/01 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS