JavaScript实现简易轮播图最全代码解析(ES6面向对象)
本文实例为大家分享了JavaScript实现简易轮播图的具体代码，供大家参考，具体内容如下
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES6轮播图</title>
<script></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 300px;
border: 1px solid silver;
overflow: hidden;
margin: auto;
margin-top: 50px;
position: relative;
top: 0;
left: 0;
}
.outer {
list-style: none;
position: absolute;
top: 0;
left: 0;
transition: .3s all linear;
}
.img {
width: 500px;
height: 300px;
float: left;
}
.btns span {
position: absolute;
width: 25px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid silver;
opacity: 0.5;
cursor: pointer;
color: #fff;
background: black;
}
.btns .left {
left: 5px;
}
.btns .right {
left: 100%;
margin-left: -32px;
}
.right > :first-child, .left > :first-child {
width: 35px;
height: 35px;
}
.oOl {
width: 163px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 10px;
list-style: none;
}
.oLi {
width: 25px;
height: 25px;
background: white;
border-radius: 50%;
float: left;
}
.color {
background: black;
}
</style>
</head>
<body>
<div class="box">
<ul class="outer">
<li class="img" style="background-image:url(img/0.jpeg)"></li>
<li class="img" style="background-image:url(img/1.jpeg)"></li>
<li class="img" style="background-image:url(img/2.jpeg)"></li>
<li class="img" style="background-image:url(img/3.jpeg)"></li>
<li class="img" style="background-image:url(img/4.jpeg)"></li>
</ul>
<div class="btns">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
<script>
class Chart{
constructor(name, json) {
//获取盒子名
this.box = document.querySelector(name);
this.json = json;
//获取轮播图的属性
this.outer = document.querySelector(name + ' .outer'); //注意加空格
this.left = document.querySelector(name + ' .left');
this.right = document.querySelector(name + ' .right');
//初始化
this.timer = null; //自动播放
this.iNow = 0;
this.init();
}
init() {
const that = this; //保存一个this
console.log(this.json.a);
if (this.json.a){
console.log(1);
}
//克隆第一张放到最后
let uLi = that.outer.children[0].cloneNode(true);
that.outer.appendChild(uLi);
that.outer.style.width = that.outer.children.length * that.outer.children[0].offsetWidth + 'px';
//点击左右滑动
if (that.json.slide) {
that.left.style.display = 'block';
that.right.style.display = 'block';
this.left.onclick = () => that.rightGo();
this.right.onclick = () => that.leftGo();
}
//自动播放
if (that.json.move) {
that.moveGo();
//鼠标移入移出
if (that.json.loop) {
that.box.onmousemove = () => clearInterval(that.timer);
that.box.onmouseout = () => that.moveGo();
}
}
//展示小圆点
if (that.json.nav) {
let oOL = document.createElement('ol');
oOL.className = 'oOl';
oOL.style.left = that.json.distanceLeft + 'px';
that.box.appendChild(oOL);
for (let i = 0; i < that.outer.children.length - 1; i++) {
let oLi = document.createElement('li');
oLi.className = 'oLi';
oLi.style.marginLeft = that.json.distance + 'px';
oOL.appendChild(oLi);
}
oOL.style.width = ((that.outer.children.length - 1) * document.querySelector('.oLi').offsetWidth) + (that.json.distance * that.outer.children.length) + 'px';
that.alike();
}
};
rightGo() {
this.iNow++;
if (this.iNow >= this.outer.children.length) {
this.iNow = 1;
this.outer.style.transition = '0s all linear';
this.outer.style.left = 0;
}
this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
this.outer.style.transition = '0.3s all linear';
this.alike();
};
leftGo() {
this.iNow--;
if (this.iNow <= -1) {
this.iNow = this.outer.children.length - 1;
this.outer.style.transition = '0s all linear';
this.outer.style.left = -(this.outer.children.length - 1) * this.outer.children[0].offsetWidth + 'px';
this.iNow = this.outer.children.length - 2;
}
this.outer.style.left = -this.iNow * this.outer.children[0].offsetWidth + 'px';
this.outer.style.transition = '0.3s all linear';
this.alike();
};
moveGo() {
const that = this;
this.timer = setInterval(() => that.rightGo(), that.json.speed || 1500)
};
//圆点对应每张图片
alike() {
let li = document.querySelectorAll('.oLi');
for (let i = 0; i < li.length; i++) {
li[i].classList.remove('color');
if (i == this.iNow) {
li[i].classList.add('color');
} else {
li[i].classList.remove('color');
}
//特殊：最后一张的时候是第一个
if (this.iNow == li.length) {
li[0].classList.add('color');
}
//小圆点点击事件
if (this.json.event) {
li[i].onmouseover = () => {
for (let i = 0; i < li.length; i++) {
li[i].classList.remove('color');
}
li[i].classList.add('color');
this.outer.style.left = -i * this.outer.children[0].offsetWidth + 'px';
}
}
}
}
}
new Chart('.box', {
move: true, //自动轮播
speed: 1500, //轮播速度
loop: true, //鼠标移入移出效果
slide: true, //点击左右滑动效果
nav: true, //展示小圆点
distance: 20, //小圆点间距
event: true //小圆点事件
})
</script>
</html>
图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript ES6解构运算符的理解和运用
目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特
-
java设计模式之观察者模式的介绍及使用
一.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象(通知者).这个主题对象观察到被观察者发生变化时,会通知所有的观察者对象,使它们能够自己更新自己 这里涉及了几个角色及他们自己功能: 观察者对象:可以更新自己 主题对象:可以添加观察者,移除观察者,通知观察者 被观察者:被主题对象监视,当被观察者发生变化时,主题对象会通知观察者更新自己的状态 二.使用场景 当一个对象改变需要同时改变其他对象的时候,而且不需要知道有多少个对象需要改变 三.举个例子 如果干巴巴的概
-
详解Node.js如何处理ES6模块
一.两种模块的差异 ES6 模块和 CommonJS 模块有很大的差异. 语法上面,CommonJS 模块使用require()加载和module.exports输出,ES6 模块使用import和export. 用法上面,require()是同步加载,后面的代码必须等待这个命令执行完,才会执行.import命令则是异步加载,或者更准确地说,ES6 模块有一个独立的静态解析阶段,依赖关系的分析是在那个阶段完成的,最底层的模块第一个执行. 二.Node.js 的区分 Node.js 要求 ES6
-
详解JS ES6编码规范
1.块级作用域 1.1.let取代var ES6 提出了两个新的声明变量的命令: let 和const.其中,let可以完全取代var,因为两者语义相同,而且let没有副作用. var命令存在变量提升的特性,而let没有这个命令. 所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读. 1.2.全局常量和线程安全 在let和const之间,优先使用const. let应出现在单线程模块代码内,而const则非常适合多线程. // bad var a = 1, b = 2,
-
JavaScript es6中var、let以及const三者区别案例详解
首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECM
-
关于前端JavaScript ES6详情
目录 1.简介 1.1 Babel 转码器 1.2 polyfill 2.let 和 const 2.1 let 2.2 const 3.解构 3.1 对象解构 3.2 数组解构 3.3 函数参数解构 3.4 常见场景 4.扩展 4.1 字符串扩展 4.2 函数扩展 4.3 数组扩展 4.4 对象扩展 4.5 运算符扩展 5.for-of 6.小结 1.简介 ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015.ES2016.ES2017语法标准.
-
JS快速掌握ES6的class用法
1.如何构造? 先复习一下es5常用的构建类的方法:首先es5的写法使用原型进行对象的方法的,为什么不在构造函数里添加方法呢?因为实例化对象的时候,会重复的建立好多相同的方法,浪费资源.所以需要把对象的方法挂载到prtotype里. 关于new和this的绑定问题,可以大概简化为: 首先通过new生成一个新的对象 然后让这个对象绑定到构造函数的this中去 然后绑定这个构造对象的原型对象上 最后把这个对象返回给前面定义的对象 那么接下来看例子吧: fuction Animal(name,age)
-
JavaScript实现简易购物车最全代码解析（ES6面向对象）
本文实例为大家分享了JavaScript实现简易购物车的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ES6购物车</title> <style type="text/css"> table { width: 50%; position: relative; ma
-
JS ES6展开运算符的几个妙用
1. 添加属性 复制对象的同时,为其添加新的属性. 例子中复制了user对象到userWithPass,并添加了password属性. const user = { id: 110, name: 'Kayson Li'} const userWithPass = { ...user, password: 'Password!' } user //=> { id: 110, name: 'Kayson Li'} userWithPass //=> { id: 110, name: 'Kayson
-
详解JS ES6变量的解构赋值
1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.它在语法上比ES5所提供的更加简洁.紧凑.清晰.它不仅能减少你的代码量,还能从根本上改变你的编码方式. 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; let c = 3; 现在可以用数组解构的方式来进行赋值 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 这是数组解构最基本类型