<!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. JSON.stringify方法报错：Converting circular structure to JSON

    别以为JSON.parse(JSON.stringify(data))做深拷贝无敌,对于以下这种情况,当你需要保留父级对象,即 对象存在循环引用,就会报错. var a = [ { "id& ...

  2. HDU6025 Coprime Sequence（gcd）

    HDU6025 Coprime Sequence 处理出数列的 \(gcd\) 前缀和后缀,删除一个数后的 \(gcd\) 为其前缀和后缀的 \(gcd\) . 遍历数列取 \(max\) 即为答案. ...

  3. Window下PHP环境配置使用Redis总结

    什么是Redis? Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的API.它和Memcached类似,它支持存储的 ...

  4. SPEL 表达式解析

    Spring Expression Language 解析器 SPEL解析过程 使用 ExpressionParser 基于 ParserContext 将字符串解析为 Expression, Exp ...

  5. 2.转发。基于itchat的微信消息同步机器人

    原文:https://www.jianshu.com/p/7aeadca0c9bd# 看到了该网址有基于itchat的微信消息同步机器人,转过来继续研究.以下是转过来的: 最近 全栈数据工程师养成攻略 ...

  6. struts2 2.5.16 通配符方式调用action中的方法报404

    1.问题描述 在struts.xml中配置用通配符方式调用action中的add()方法,访问 http://localhost:8080/Struts2Demo/helloworld_add.act ...

  7. 【EWM系列】SAP EWM中仓库任务WT创建的函数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[EWM系列]SAP EWM中仓库任务WT创建的 ...

  8. 【Linux开发】如何查看Linux kernel的内置模块驱动列表和进程ID

    [Linux开发]如何查看Linux kernel的内置模块驱动列表和进程ID 标签:[Linux开发] 命令: cat /lib/modules/$(uname -r)/modules.builti ...

  9. 解决172.17 或者172.18 机房环境下harbor服务器不通的问题

    直接改docker-compose.yml文件: 把原来的network选项注释掉,自定义 #networks: # harbor: # external: false networks: harbo ...

  10. 基于 Timer是一种定时器工具

    没有依赖 通过Timer中的schedule方法启动定时任务 一般不采用此方法 /** * ------------------------------------------------------ ...