<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.hezi {
  width: 500px;
  height: 300px;
  padding: 10px;
  margin: 100px auto;
  position: relative;
}
#tupian {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}
ul {
  width: 500px;
  height: 300px;
  position: absolute;
}
#tupian ul li {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 0.8s;
}
.btnBox {
  width: 500px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 75px;
}
#leftBtn {
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  font-family: "宋体";
  color: #fff;
  text-decoration: none;
}
#rightBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 50px;
  background-color: #ccc;
  text-align: center;
  line-height: 50px;
  font-family: "宋体";
  font-size: 50px;
  color: #fff;
  text-decoration: none;
}
#tupian ol {
  width: 125px;
  height: 15px;
  position: absolute;
  z-index: 100;
  right: 10px;
  bottom: 5px;
}
#tupian ol li {
  width: 10px;
  height: 10px;
  padding: 5px;
  background-color: #fff;
  text-align: center;
  line-height: 10px;
  list-style: none;
  margin-right: 5px;
  float: left;
}
#tupian ol li.cur {
  background-color: yellow;
}
</style>
</head>
<body>
<div class="hezi" id="hezi">
  <div id="tupian">
    <ul>
      <li style="opacity:1;"><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
    </ul>
    <ol>
      <li class="cur">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
  <div class="btnBox">
    <a href="javascript:void(0);" id="leftBtn">
    <</a>
    <a href="javascript:;" id="rightBtn">>
    </a>
  </div>
</div>
</body>
<script>
  function Zhuanzhaun(bigEle, smilEle, l, r) {
    this.hezi = document.getElementById(bigEle);
    this.tupian = document.getElementById(smilEle);
    this.ul = tupian.children[0];
    this.ulLiArr = this.ul.children;
    this.ol = tupian.children[1];
    this.olLiArr = this.ol.children;
    this.leftBtn = document.getElementById(l);
    this.rightBtn = document.getElementById(r);
    this.k = 0;
    this.timer = null;
    this.init();
  }
  Zhuanzhaun.prototype = {
    init: function () {
    this.autoplay();
    this.bindRClick();
    this.bindOver();
    this.dianji();
    this.bindEnter();
    this.bindOut();
  },
  autoplay: function () {
    this.timer = setInterval(() => {
      this.autostep();
    }, 2000)
  },
  autostep: function () {
    this.k++;
    if (this.k > 4) {
      this.k = 0;
    }
    for (var i = 0; i < this.ulLiArr.length; i++) {
      this.ulLiArr[i].style.opacity = 0;
      this.olLiArr[i].className = "";
    }
    this.ulLiArr[this.k].style.opacity = 1;
    this.olLiArr[this.k].className = "cur";
  },
  bindEnter: function () {
    var that = this;
    this.hezi.onmouseenter = function () {
      clearInterval(that.timer);
    }
  },
  bindOut: function () {
    var that = this;
    this.hezi.onmouseleave = function () {
      that.autoplay();
    }
  },
  autostep1: function () {
    var _this = this;
    this.k--;
    if (this.k < 0) {
      this.k = 4;
    }
    for (var i = 0; i < _this.ulLiArr.length; i++) {
      _this.ulLiArr[i].style.opacity = 0;
      _this.olLiArr[i].className = "";
    }
    _this.ulLiArr[this.k].style.opacity = 1;
    _this.olLiArr[this.k].className = "cur";
  },
 
    dianji: function () {
      var that = this
      this.leftBtn.onclick = function () {
      that.autostep1();
    }
  },
  bindClick: function () {
    var that = this;
    this.leftBtn.onclick = function () {
    that.k--;
    that.autostep();
    if (that.k < 0) {
      that.k = 4;
    }
    for (var i = 0; i < that.ulLiArr.length; i++) {
      that.ulLiArr[i].style.opacity = 0;
      that.olLiArr[i].className = "";
    }
    that.ulLiArr[that.k].style.opacity = 1;
    that.olLiArr[that.k].className = "cur";
    }
  },
  bindRClick: function () {
    var that = this;
    this.rightBtn.onclick = function () {
      that.autostep();
    }
  },
  bindOver: function () {
    var that = this;
    for (var i = 0; i < this.olLiArr.length; i++) {
    this.olLiArr[i].onmouseover = function () {
      for (var j = 0; j < that.olLiArr.length; j++) {
        that.olLiArr[j].className = "";
        that.ulLiArr[j].style.opacity = 0;
        if (this == that.olLiArr[j]) {
          that.k = j;
          that.ulLiArr[that.k].style.opacity = 1;
          this.className = "cur";
         }
       }
     }
    }
   }
  }
new Zhuanzhaun("hezi","tupian","leftBtn","rightBtn");
</script>
</html>

面向对象原生js轮播图的更多相关文章

  1. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  3. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  4. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  5. 原生js轮播图实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  7. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  8. 原生JS轮播-各种效果的极简实现(二)面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  9. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

随机推荐

  1. JavaScript中this的一些坑

    我们经常在回调函数里面会遇到一些坑: var obj = { name: 'qiutc', foo: function() { console.log(this); }, foo2: function ...

  2. Jquery Ajax调用asmx出错问题

    1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释.      [System.Web.Script.Services.ScriptService] 这个 ...

  3. 中国MOOC_零基础学Java语言_第7周 函数_1分解质因数

    第7周编程题 查看帮助 返回   第7周编程题 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截 ...

  4. nginx重要特性

    反向代理负载均衡实现高并发 1.反向代理反向代理(Reverse Proxy)方式是指以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器:并将从服务器上得到的结果返回给 ...

  5. java 发送 http post 和 get 请求(利用unirest)

    调用服务器端的接口在前端调用,但是我们也会经常遇到在服务器后端调用接口的情况,网上的例子大部分都是用 jdk 原生的 URL realUrl = new URL(url); URLConnection ...

  6. 【Linux开发】【Qt开发】Qt界面键盘、触摸屏、鼠标的响应设置

    USB键盘 经过一番搜索,发现对Qt键盘的支持主要关系到两个方面: 1. 键盘类型确定: 4.7以前的Qt版本,如果是PS2圆孔键盘,Qt编译时需加上选项:-qt-kbd-vr41xx(未测试):如果 ...

  7. 用WebService实现对数据库进行操作(添加+删除+修改)(转)

    转自:http://blog.csdn.net/beyondqd/article/details/6703169 表为User,字段有 编号: int id,用户名:string UserName,密 ...

  8. 第五周学习总结&第三次实验报告(String类的应用)

    第五周学习总结 1.学习了继承的相关知识点: (1) 继承的格式为class 子类 extends 父类{} (2) 继承实际上是通过子类去扩展父类的功能 (3) 一个子类只能继承一个父类,也就是说, ...

  9. 关于java范型

    1 范型只在编译阶段有效 编译器在编译阶段检查范型结果之后,就会将范型信息删除.范型信息不会进入运行时阶段. 泛型类型在逻辑上看以看成是多个不同的类型,实际上都是相同的基本类型. 2 不能对确定的范型 ...

  10. uboot 主Makefile分析

    一. Makefile 配置 1.1. make xxx_config 1.1.1. 笔者实验时是make x210_sd_config a. x210_sd_config是Makefile下的一个目 ...