<!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. ubuntu16虚拟机迁移/移动/复制后无法上网

    修改grub配置 如果没有网卡,需要配置 sudo vi /etc/default/grub 将 GRUB_CMDLINE_LINUX="" 修改为 GRUB_CMDLINE_LI ...

  2. legend2---lamp.sh一键安装lamp环境需要爬的坑

    legend2---lamp.sh一键安装lamp环境需要爬的坑 一.总结 一句话总结: 1.要记得更改项目权限:chown -R apache:apache /data/www/default/网站 ...

  3. JVM参数配置详解-包含JDK1.8

    堆大小设置    JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:6 ...

  4. Linux_IPtables防火墙详解

    目录 目录 Iptables Iptables结构 规则表 规则链 iptables指令用法详解 综合案例 SNAT 策略 DNAT 策略 Iptables规则的备份和还原 iptables 练习 I ...

  5. 用U盘完成win10系统的安装

    电脑太卡了,每次都要重装,然后每次忘记要从哪里开始动手,都要百度,仅以此篇记录下 目录 1.系统盘准备 2.从U盘启动安装 1.系统盘准备 第一步:在电脑中完成系统盘制作工具的安装,由于它是要依赖.n ...

  6. 【Fiddler】开启手机的http或https抓包

    fiddler安装 下载fiddler最新版: 默认安装: 打开fiddler工具,默认界面: 选择上方,Tools-→options General界面 HTTPS界面 CONNECTIONS,po ...

  7. 【MM系列】SAP MM模块-如何修改物料的移动平均价

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MM模块-如何修改物料的移动 ...

  8. C++——堆、栈与内存管理

    简介 Stack,是存在于某作用域(scope) 的一块内存空间(memory space).例如当你调用函数,函数本身即会形成一个stack 用來放置它所接收的参数,以及返回地址.在函数本体(fun ...

  9. 递归算法之排列组合-求一个集合S的m个元素的组合和所有可能的组合情况

    求一个集合S的m个元素组合的所有情况,并打印出来,非常适合采用递归的思路进行求解.因为集合的公式,本身就是递归推导的: C(n,m) = C(n-1,m-1) + C(n-1,m). 根据该公式,每次 ...

  10. java创建多线程实现并行计算任务处理

    1.直接上代码一看明白: package multithreadingTest; class fblib extends Thread{ public static Integer fb(Intege ...