原生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 ...
随机推荐
- E比昨天更多的棒棒糖（Easy+Hrad）（华师网络赛）（DP||母函数||背包优化）
Time limit per test: 2.0 seconds Memory limit: 512 megabytes 唐纳德先生的某女性朋友最近与唐纳德先生同居.该女性朋友携带一 baby.该 b ...
- 设计模式-利用职责链模式消除if
本文是对职责链设计模式的应用(变种),所以假设读者已经掌握了职责链设计模式,职责链模式只会应景简介. 本文主要内容: 需求(ShitCode) 职责链模式简介 设计理念 代码演示(消除if) 应用总结 ...
- BZOJ1727：[Usaco2006 Open]The Milk Queue挤奶队列
我对\(Jhonson\)算法的理解:https://www.cnblogs.com/AKMer/p/9863620.html 题目传送门:https://www.lydsy.com/JudgeOnl ...
- C#某月的第一天和最后一天
1.本月的第一天===>DateTime.Now.AddDays(1 - DateTime.Now.Day);//当前日期减去当前日期和本月一号相差天数 2.本月的最后一天===>Date ...
- 面向对象要点（this关键字）
package day07; public class ThisKeywords { private String name; private void Foo(String name) { this ...
- maven仓库的管理_Nexus
maven仓库管理的软件有很多,这里介绍的是Sonatype的nexus 一.下载 下载地址:https://yunpan.cn/cv2JhzwQuvb7B 访问密码 932d 二.安装 2.1.将 ...
- RN控件之TextInput
/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...
- Assembly.GetManifestResourceNames()获取不到资源文件
Assembly.GetManifestResourceNames()获取到的是嵌入的资源文件 右键资源文件属性 将生成操作改为嵌入的资源就OK咯
- 使用showInputDialog显示输入框
------------------siwuxie095 工程名:TestJOptionPane 包名:com.siwuxie095.showd ...
- mongodb 查询数据
MongoDB概念解析: 等同于SQL的数据库表:collectiondocument:等同于SQL的数据记录行field:等同于SQL的数据字段表连接,MongoDB不支持主键,MongoDB自动将 ...