<!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. 树状数组的理解（前缀和 and 差分）

    二更—— 有神仙反映数星星那个题外链炸了,我决定把图给你们粘一下,汉语翻译的话在一本通提高篇的树状数组那一章里有,同时也修改了一些汉语语法的错误 这段时间学了线段树组,当神仙们都在学kmp和hash的 ...

  2. Vue创建局部组件

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

  3. c# 窗口关闭方法

    背景:点击datagridview某条信息弹出信息详情窗口,当连续点击时需要关闭之前的详情窗口. 实现方式: 父窗口中 全局创建子窗口(MsgDetailFrm  ): MsgDetailFrm de ...

  4. spring + springMVC +hibernate 配置2

    这种方式比较精简 配置项不多 spring采用自动扫描配置 ,分spring_springMVC.xml  . hibernate_config.xml 两个文件 web.xml配置如下 <?x ...

  5. C++拷贝构造函数心得

    C++Primer作者提到拷贝构造函数调用的三种时机: 1. 当用一个类对象去初始化另外一个类对象(类似于 AClass aInstance = bInstance),这里不是调用赋值构造函数(也叫赋 ...

  6. 4.2.k8s.Ingress-Nginx

    Ingress-Nginx ingress-nginx为7层代理,通过配置域名访问后端服务 ingress-nginx容器和kubernetes api交互,动态生成nginx配置 ingress服务 ...

  7. TCP网络编程（Socket通讯）

    TCP 网路编程: 1.TCP 三次握手: 第一次握手,客户端向服务器端发出连接请求,等待服务器确认. 第二次握手,服务器端向客户端回送一个响应,通知客户端收到了连接请求. 第三次握手,客户端再次向服 ...

  8. kubeadm初始化kubernetes集群

    有两种方式安装集群: 1.手动安装各个节点的各个组件,安装极其复杂困难. 2.使用工具:kubeadm kubeadm 是官方提供的专门部署集群的管理工具. 1. 在kubeadm下每个节点都需要安装 ...

  9. oracle 实现mysql find_set_in函数

    create or replace FUNCTION F_FIND_IN_SET(piv_str1 varchar2, piv_str2 varchar2, p_sep varchar2 := ',' ...

  10. 如何在centos6和centos7上部署nfs共享服务器和客户端

    nfs共享服务为中小型企业在存储上提供了有效的节省空间,许多大型的网站也在使用nfs,如百度和阿里等,下面结合自己所学的知识,阐述如何在centos6和centos7下配置nfs.注:除了必要的说明外 ...