原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化
之前写了一篇原生JS轮播，不过是非面向对象的，并且也没有添加上自动轮播。这里来写一下如何优化和进阶。
这里简单地介绍一下之前的代码,这是html结构
<body>
<div class="wrap">
<ul class="pic-group">
<li><img src="./pic1.jpg" alt=""></li>
<li><img src="./pic2.jpg" alt=""></li>
<li><img src="./pic3.jpg" alt=""></li>
<li><img src="./pic4.jpg" alt=""></li>
<li><img src="./pic5.jpg" alt=""></li>
</ul>
<ol class="num-group">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
css结构
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
body {
background-color: #000;
}
.wrap {
position: relative;
border: 8px solid #fff;
margin: 100px auto;
width: 400px;
height: 250px;
overflow: hidden;
}
.pic-group {
position: absolute;
}
.pic-group li img {
display: block;
width: 100%;
height: 100%;
}
.num-group {
position: absolute;
bottom: 5px;
right: 0;
height: 20px;
}
.num-group li {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 10px;
margin-right: 10px;
background-color: #089e8a;
color: #eee;
text-align: center;
border-radius: 10px;
cursor: pointer;
opacity: 0.8;
}
.num-group li:hover {
box-shadow: 0 0 18px #000;
}
.num-group li.current {
opacity: 1;
color: #089a8a;
background-color: #000;
}
</style>
JS 结构
const oImage = document.getElementsByClassName("pic-group")[0];
const oNumber = document.getElementsByClassName("num-group")[0];
const numList = oNumber.getElementsByTagName("li");
for (let i = 0; i < numList.length; i++) {
numList[i].onmouseover = () => {
clearNumState();
show(i);
}
}
const clearNumState = () => {
for (const item of numList) {
item.className = "";
}
}
let timer = null;
const show = (index) => {
numList[index].className = "current";
if (timer) clearInterval(timer);
const target = -250 * index;
let now = oImage.offsetTop;
timer = setInterval(() => {
if (now === target) {
clearInterval(timer);
} else {
now += move(target);
oImage.style.top = now + "px";
console.log(oImage.offsetTop);
}
}, 20);
}
const move = (target) => {
// 当前值
const now = oImage.offsetTop;
const differ = target - now;
console.log(differ / 10);
const res = differ > 0 ? Math.ceil(differ / 10) : Math.floor(differ / 10);
return res;
}
进阶1：我们可以通过offsetHeight获取图片元素的高度。好处1是我们的移动函数不用限死。也为后来将其变为通用的一组代码做铺垫。
这里遇到一个不该出现的问题。常常我们看到直接获取高度的时候是 0，原因是：一些元素是根据内容的高度自动调整的，即所谓的自适应高度，它的高度取决于内容的多少。
获取这样的自适应高度元素主要有两种办法
- currentStyle
- offsetHeight
但用在这里我的offsetHeight竟然是0？不是说好了能获取自适应高度的吗！
const oHeight = oImage.getElementsByTagName("li")[0].offsetHeight;
console.log(oHeight); // 0 !!! 0 !!!
经过我的发现，我知道了问题出在这里？JS代码跑完了？但是图片是否加载完毕了呢?
window.onload = function() {
const oT = document.getElementsByClassName("pic-group")[0];
const oI = oT.getElementsByTagName("li");
console.log(oI[0].offsetHeight); // 250
}
图片没有加载完。当然这里还有一个疑问，为什么控制台有了答案？(这个留待以后探究)
https://www.cnblogs.com/hanxingli/p/5513116.html
这里第 5 句 正是解答，图片还在加载中，先执行了代码。
那么，解决方案是什么呢？
我们需要的是等图片加载完后执行JS的办法
http://www.jb51.net/article/79233.htm
思前想后，这只是个简单的轮播，我选择了window.onload，还有一个不太破坏代码的是async/await，可是那需要加载新的库支持，所以这里选择了最开始的window.onload。
进阶2：添加自动轮播，同时，我们也可以发现，clearNumState应该放在show函数里面
const oImage = document.getElementsByClassName("pic-group")[0];
const oNumber = document.getElementsByClassName("num-group")[0];
const numList = oNumber.getElementsByTagName("li");
const imageList = oImage.getElementsByTagName("li");
const oHeight = imageList[0].offsetHeight;
for (let i = 0; i < numList.length; i++) {
numList[i].onmouseover = () => {
// clearNumState();
show(i);
}
}
const clearNumState = () => {
for (const item of numList) {
item.className = "";
}
}
let timer = null;
const show = (index) => {
clearNumState();
numList[index].className = "current";
if (timer) clearInterval(timer);
const target = -oHeight * index;
let now = oImage.offsetTop;
timer = setInterval(() => {
if (now === target) {
clearInterval(timer);
} else {
now += move(target);
oImage.style.top = now + "px";
console.log(oImage.offsetTop);
}
}, 20);
}
const move = (target) => {
const now = oImage.offsetTop;
const differ = target - now;
console.log(differ / 10);
const res = differ > 0 ? Math.ceil(differ / 10) : Math.floor(differ / 10);
return res;
}
let autoTimer = null;
let index = 0;
const auto = () => {
autoTimer = setInterval(() => {
show(index);
index < numList.length - 1 ? index++ : index = 0;
}, 2000);
}
auto();
进阶3：还需要添加上鼠标移动前后的东西
oImage.onmouseover = function() {
if (autoTimer) clearInterval(autoTimer);
}
oImage.onmouseout = function() {
auto();
}
进阶4：细节优化：关于我们若是我们刚好按到当前显示的轮播页，这个时间问题，就跟下面一起写了~
进阶5：最后就是将代码模式变为面向对象的模式，使得同一页面上的多个轮播结构能够一起进行。这里的改动比较大，就直接上代码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
body {
background-color: #000;
}
.wrap {
position: relative;
border: 8px solid #fff;
margin: 100px auto;
width: 400px;
height: 250px;
overflow: hidden;
}
.pic-group {
position: absolute;
}
.pic-group li img {
display: block;
width: 100%;
height: 100%;
}
.num-group {
position: absolute;
bottom: 5px;
right: 0;
height: 20px;
}
.num-group li {
float: left;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 10px;
margin-right: 10px;
background-color: #089e8a;
color: #eee;
text-align: center;
border-radius: 10px;
cursor: pointer;
opacity: 0.8;
}
.num-group li:hover {
box-shadow: 0 0 18px #000;
}
.num-group li.current {
opacity: 1;
color: #089a8a;
background-color: #000;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="pic-group">
<li><img src="./pic1.jpg" alt=""></li>
<li><img src="./pic2.jpg" alt=""></li>
<li><img src="./pic3.jpg" alt=""></li>
<li><img src="./pic4.jpg" alt=""></li>
<li><img src="./pic5.jpg" alt=""></li>
</ul>
<ol class="num-group">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
<script type="text/javascript">
var Carousel = function(cname) {
this.init(cname);
}
Carousel.prototype = {
init: function(cname) {
let me = this;
me.oWrap = document.getElementsByClassName(cname)[0];
me.oImage = me.oWrap.getElementsByTagName("ul")[0];
me.imageList = me.oImage.getElementsByTagName("li");
me.imageHeight = me.imageList[0].offsetHeight;
me.oNumber = me.oWrap.getElementsByTagName("ol")[0];
me.numberList = me.oNumber.getElementsByTagName("li");
me.index = 0;
me.moveTimer = null;
me.autoTimer = null;
for (let i = 0; i < me.numberList.length; i++) {
me.numberList[i].onmouseover = function() {
me.index = i;
me.Show(i);
}
}
me.Auto();
me.oImage.onmouseover = function() {
clearInterval(me.autoTimer);
}
me.oImage.onmouseout = function() {
me.Auto();
}
},
Show: function(index) {
let me = this;
me.clearClass(index);
me.Move(index);
},
Move(index) {
let me = this;
let target = -index * me.imageHeight;
let now;
let speed;
if (me.moveTimer) clearInterval(me.moveTimer);
me.moveTimer = setInterval(() => {
now = me.oImage.offsetTop;
speed = (target - now) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
now === target ? clearInterval(me.moveTimer) : me.oImage.style.top = now + speed + "px";
}, 20);
},
Auto() {
let me = this;
me.autoTimer = setInterval(() => {
me.index < me.imageList.length - 1 ? me.index++ : me.index = 0;
me.Show(me.index);
}, 2000);
},
clearClass(index) {
let me = this;
for (let i = 0; i < me.numberList.length; i++) {
me.numberList[i].className = "";
}
me.numberList[index].className = "current";
}
}
window.onload = function() {
new Carousel("wrap");
}
</script>
</html>
原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化的更多相关文章
- 原生JS轮播-各种效果的极简实现
寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js___原生js轮播
原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js轮播图
//用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
- 原生js轮播以及setTimeout和setInterval的理解
下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...
- 手把手原生js轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 原生js轮播图实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- p2p视频点播系统开发案例――Myseelite
项目地址:http://sourceforge.net/projects/myseelite/ 1. MySee公司倡导的开源项目,目前国内功能最强大的一个开源系统. 2. 一个直播(也支持轮播.点播 ...
- bzoj5329 战略游戏
有一个圆方树,每次给出一个点集,询问虚树上圆点数量-询问点数量 sol:题意读懂就很简单了...可以建虚树dp 也可以考虑每一条链对答案的贡献,最后要注意单独计算虚树根对答案的贡献 #pragma G ...
- luogu1801 黑匣子
惊了呀 Splay Treap 这都什么玩意 两个优先队列搞定 #include <bits/stdc++.h> using namespace std; #define LL long ...
- BZOJ5461: [PKUWC2018]Minimax
BZOJ5461: [PKUWC2018]Minimax https://lydsy.com/JudgeOnline/problem.php?id=5461 分析: 写出\(dp\)式子:$ f[x] ...
- SLF4j+LOG4j
工作笔记:在myeclipse 中创建一个java project 创建一个 TestSlf4J 类 import org.slf4j.Logger; import org.slf4j.LoggerF ...
- VBS调用并监控记事本进程
Dim flag flag=true Set WshShell = CreateObject("WScript.Shell") '创建WScript.Shell对象 Set ...
- JS ES6 -- let命令
1.ES6新增了块级作用域的let和const 这新特性let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for循环的计数器,就很合适使用let命令 ...
- RAC环境下ORACLE序列缓存导致序列混乱
目前项目中发现了这样一个问题,在数据库部署了RAC环境之后,偶尔会出现从Oracle Sequence所取出来的数是混乱的,比如第二次比第一次所取的数要小.这样当程序的逻辑依赖于ID的大小来排序时,就 ...
- python 基础 字典 增删改查
content = {"name":"wd","pc":{"phone":111111,"age": ...
- 关于Android进程的启动和消亡
在打开一个应用程序的时候,packagemanager会根据manifest文件去查找有没有相应的进程已启动,若果没有启动,那么就启动一个新的进程 进程退出有两种方式,用finish结束主activi ...