<!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. clr/c++自定线程安全集合

    代码如下: 难点重写索引器.重写基类方法.基类方法显示调用示例 generic <class T> public ref class SyncList : public List<T ...

  2. es6 语法的

    es5 中提供了 两个声明变量的方式 var function es6 中提供了 四种声明变量的方式 let const class import 现在,定义变量的关键字有 6 个了 备注:不能忽略函 ...

  3. linux查看端口被那个进程占用

    linux下遇到端口被暂用了 需要知道是哪个进程 比如80端口 可以这样 netstat -tunlp|

  4. 为什么在vmware中不能使用ctrl+alt+F1~6切换到字符控制台

    为什么在vmware中不能使用ctrl+alt+F1~6切换到字符控制台 是因为vmware虚拟机的快捷键: ctrl+alt也用到了 因为vmware本身的hot keys也用到了ctrl+alt: ...

  5. nginx请求转发配置

    以下为无ssl证书配置的请求转发 server { listen ; server_name api.****.com; #以下为指定请求域名匹配到某一个端口 #location ~* /union ...

  6. 使用virt-manager创建无盘工作站(基于nfs文件系统)

    首先需要做些准备工作: 1.安装xming及virt-manager, 安装过程网上很多,就不一一叙述了.安装完成后,使用putty登陆服务器,需要配置如下: connection -> SSH ...

  7. HTML和JS完成页面点击四个角弹出管理页面

    实现方法1: HTML代码: <div class="top-left-corner"></div> <div class="top-rig ...

  8. hibernate+spring mvc,解决hibernate对象懒加载，json序列化失败

    在使用spring MVC时,@ResponseBody 注解的方法返回一个有懒加载对象的时候出现了异常,以登录为例: @RequestMapping("login") @Resp ...

  9. Jackson常用注解及用法

    最近写项目,用到Jackson的一些注解,总结一下,帮助自己记忆. 1.@JsonIgnore 和 @JsonIgnoreProperties 两个注解可以对照比较后选择使用: @JsonIgnore ...

  10. Scratch少儿编程系列：（八）演奏简单音乐

    一.程序说明 本程序,用来演奏简单音乐. 二.制作过程 1. 场景和角色的选择 场景选择“音乐和舞蹈”主题下的“party root”,角色沿用默认角色,如下图: 选择后效果如下图: 2. 切换到“脚 ...