Day12(面向对象)
一、回调函数 call back
含义: 当我们把一个函数A当成一个参数传给函数B 这个函数A就是回调函数
function B(cb){
console.log(cb)
// 调用cb其实就是在调用A
}
function A(){
}
// 这个函数A不是由我们直接使用
B(A)
二、面向对象
面向对象--> 关注对象
编程思想
面向过程
关注每一步的实现
面向对象
封装、继承、多态
核心思想: 创建一个对象 利用这个创建出来的对象解决问题
js面向对象思维
Date Array
对象:
用字面量或者内置构造函数的方式创建对象
使用工厂函数创建对象
只要调用这个函数可以返回一个数据
自定义构造函数创建对象
三、new调用和直接调用的区别(作用)
- new在调用函数的时候会在函数内部自动创建一个对象
- 将函数内部的this指向到这个创建出来的对象
- new在调用函数结束的时候会自动返回一个对象
四、构造函数
- 利用new来调用的函数被称为构造函数
五、swiper插件
https://swiper.com.cn/
详细使用看官网介绍
六、基本轮播图
注意事项:使用只需要更改图片的位置就可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
position: relative;
width: 590px;
height: 470px;
margin: 0 auto;
border: 1px solid #ddd;
}
.wrap .img-list {
width: 100%;
height: 100%;
}
.wrap .img-list .img-list-item {
display: none; /* 隐藏所有 */
width: 100%;
height: 100%;
}
.wrap .img-list .img-list-item:nth-child(1) {
display: block; /* 显示第一张 */
}
.wrap .img-list .img-list-item img {
width: 100%;
height: 100%;
}
.wrap .img-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.wrap .img-dots li {
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 10px;
margin: 0 3px;
cursor: pointer;
}
.wrap .img-dots li.active {
background-color: orange;
}
.wrap .img-btns .left-btn {
position: absolute;
left: 0;
top: 50%;
font-size: 30px;
}
.wrap .img-btns .right-btn {
position: absolute;
right: 0;
top: 50%;
font-size: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 图片的部分 -->
<div class="img-list">
<div class="img-list-item">
<img src="./img/1.jpg" alt="" />
</div>
<div class="img-list-item">
<img src="./img/3.jpg" alt="" />
</div>
<div class="img-list-item">
<img src="./img/4.jpg" alt="" />
</div>
<div class="img-list-item">
<img src="./img/5.jpg" alt="" />
</div>
<div class="img-list-item">
<img src="./img/6.jpg" alt="" />
</div>
</div>
<!-- 点的部分 -->
<ul class="img-dots">
<!-- 动态生成 -->
</ul>
<!-- 左右箭头部分 -->
<div class="img-btns">
<button class="left-btn">左</button>
<button class="right-btn">右</button>
</div>
</div>
<script>
// 获取所有的图片
var imgs = document.querySelectorAll(".img-list-item");
// 根据图片的长度生成点
var len = imgs.length;
for (let i = 0; i < len; i++) {
var newDot = document.createElement("li");
if (i === 0) newDot.classList.add("active"); // 默认第一个点激活
document.querySelector(".img-dots").appendChild(newDot);
}
// 获取所有的点
var dots = document.querySelectorAll(".img-dots li");
console.log(dots);
// 使用变量表示当前显示哪一张图片
var index = 0;
// 点击左右箭头切换图片
document.querySelector(".right-btn").onclick = function () {
index++;
console.log(index);
if (index === len) {
index = 0; // 到达最后一张返回第一张
}
// 隐藏所有
for (let i = 0; i < len; i++) {
imgs[i].style.display = "none";
dots[i].classList.remove("active");
}
// 显示当前
imgs[index].style.display = "block";
// 让对应的点加激活色
dots[index].classList.add("active");
};
// 点击点跳转到对应的图片
for (let i = 0; i < dots.length; i++) {
dots[i].onclick = function () {
// 获取到点的索引
// 把点击点的索引赋值给图片
index = i;
// 隐藏所有
for (let i = 0; i < len; i++) {
imgs[i].style.display = "none";
dots[i].classList.remove("active");
}
// 显示当前
imgs[index].style.display = "block";
// 让对应的点加激活色
dots[index].classList.add("active");
};
}
/* 自动轮播图 */
let id = setInterval(() => {
index++;
console.log(index);
if (index === len) {
index = 0; // 到达最后一张返回第一张
}
// 隐藏所有
for (let i = 0; i < len; i++) {
imgs[i].style.display = "none";
dots[i].classList.remove("active");
}
// 显示当前
imgs[index].style.display = "block";
// 让对应的点加激活色
dots[index].classList.add("active");
}, 1000);
// 鼠标移入停止轮播
document.querySelector(".wrap").onmouseover = function () {
clearInterval(id);
};
// 鼠标移出再次轮播
document.querySelector(".wrap").onmouseout = function () {
id = setInterval(() => {
index++;
console.log(index);
if (index === len) {
index = 0; // 到达最后一张返回第一张
}
// 隐藏所有
for (let i = 0; i < len; i++) {
imgs[i].style.display = "none";
dots[i].classList.remove("active");
}
// 显示当前
imgs[index].style.display = "block";
// 让对应的点加激活色
dots[index].classList.add("active");
}, 1000);
};
</script>
</body>
</html>