<!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. C++获取寄存器eip的值

    程序中需要打印当前代码段位置 如下 #include <stdio.h> #include <stdlib.h> #include <math.h> #ifdef ...

  2. React Router学习笔记（转自阮一峰老师博客）

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  3. leetcode-mid-math -171. Excel Sheet Column Number

    mycode   90.39% class Solution(object): def titleToNumber(self, s): """ :type s: str ...

  4. rosbag 那些事

    ..bag文件转.txt 将file_name.bag文件中topic_name话题的消息转换到Txt_name.txt文件中: rostopic echo -b file_name.bag -p / ...

  5. java中FastJson的json类型转换

    JSON Gson: 来自Google,功能全面.快速.简洁.面向对象.数据传递和解析方便. Jackson:来源FasterXML项目,社区活跃,更新快 解析速度和效率比Gson快,但无法按需解析, ...

  6. 在vi vim中使用正则表达式与 普通perl正则的区别?

    参考这篇文章很好 vim中的正则表达式常用的命令有种, 即搜索和替换 /: 搜索 :s 替换 在vim中的正则表达式和perl编程的正则表达式还是有区别的: 正则表达式中的内容包括: 字面字符... ...

  7. FreeBSD上安装Cassandra 3.10

    哈哈,你居然点进来了,来吧,一起吐槽FreeBSD啊,装了一上午Cassandra 3.10都没有装成功, 终于,鄙人一条 shutdown -p now 结束了FreeBSD,默默打开了CentOS ...

  8. Python Module_subprocess_调用 Powershell

    目录 目录 前言 Powershell call Python Python call Powershell Powershell发送邮件 最后 前言 使用Python内建的subprocess模块, ...

  9. centos官网镜像下载方法

    1.CentoS简介 CentOS(Community Enterprise Operating System,社区企业操作系统)是一个基于Red Hat Linux 提供的可自由使用源代码的企业级L ...

  10. gts测试流程

    测试目的: 用于检测你做的Android gms包是否满足兼容性要求,通俗点说,gms包,就是Google自己的apk,提供基础服务,例如YouTube.playstore等. 测试前提: 1.发货u ...