面向对象原生js轮播图
2024-10-07 07:24:22
<!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>
最新文章
- java.lang.Enum<;E extends Enum<;E>;>;
- flash 自定义右键功能
- libSVM 简易使用手册
- winform - BackgroundWorker
- Xcode6插件开发
- xp sp3安装 iis5.1
- 阿里云 CentOS7.2 配置FTP+Node.js环境
- swiper拖拽之后不自动滑动问题
- touch事件应用
- 第一天 Java语言概述
- [武汉集训] Cliquers
- 兼容不同浏览器的CSS前缀-webkit-,-ms-,-moz-,-o-
- kali蓝牙连接
- 解释mysql 语句 ——解释CREATE DATABASE `test` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci
- json树递归js查询json父子节点
- python小工具
- mybatis由浅入深day02_7.3二级缓存
- 【PMP考试专栏】01、五大过程组和十大知识领域
- jQuery代码优化:基本事件
- Xcode_7_GM_seed.dmg下载
热门文章
- mysql 字符串字段中查找非ascii字符
- leetcode-mid-dynamic programming-322. Coin Change - NO
- [C#菜鸟]C# Hook (一)
- 我写过的bug...
- OpenStack Placement Project
- 阶段3 1.Mybatis_03.自定义Mybatis框架_4.自定义mybatis的编码-解析XML的工具类介绍
- LeetCode算法题-Peak Index in a Mountain Array(Java实现)
- 【Linux开发】直接渲染管理
- Go语言入门篇-基本数据类型
- [转帖]Twitter 宣布抛弃 Mesos,全面转向 Kubernetes