首页
所有分类
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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
Vue 路由间跳转和新开窗口的方式（query、params）
Dec 25 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
微信小程序实现锚点跳转
Nov 23 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
A254(1) 安健(1) SRF-M100(1) 德劲1102(1) 华普R-96(1) 上海永华(1) 德劲1107(1) GF515(1) SHARP(1) YH-R296(1)
You might like
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
PHP实现简易计算器功能
2020/08/28 PHP
你所要知道JS（DHTML）中的一些技巧
2007/01/09 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python中的TCP socket写法示例
2018/05/11 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python 弧度与角度互转实例
2020/04/15 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
加拿大折扣、优惠券和交易网站：WagJag
2018/02/07 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
信息技术课后反思
2014/04/27 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015年教师节主持词
2015/07/03 职场文书
早恋主题班会
2015/08/14 职场文书
演讲稿：​快乐，从不抱怨开始！
2019/04/02 职场文书
创业计划书之家教托管
2019/09/25 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
css3 选择器
2022/05/11 HTML / CSS