上次我们讲运动函数，实际开发不会写运动函数。只是讲一下思想。
现在讲一下用原生js去实现轮播图，引入到对象
首先，要明确 面向对象不是语法，是一个思想，是一种编程模式
面向：朝向
面向对象：脸朝着对象 === 关注对象的编程模式
面向过程：脸朝着过程 === 关注过程的编程模式
举例
-
在面向过程时，我们要关注每一个元素，每一个元素之间的关系，顺序。。。
-
在面向对象时，我们只需要找到一个对象来帮我做某件事儿，我等待结果。
要去吃面条
-
面向过程：
-
用多少面粉
-
加多少水
-
和面
-
切面条
-
煮开水
-
。。。
-
煮面
-
吃面
-
-
面向对象
-
找一个面馆
-
要一碗面
-
等着吃
-
C 面向过程的
js java ios 面向对象的
01-轮播图
<!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>* {padding: 0;margin: 0;list-style: none;}.box {width: 1000px;height: 500px;border: 2px solid red;position: relative;}img {width: 1000px;height: 500px;position: absolute;left: 0;top: 0;}span {position: absolute;width: 50px;height: 100px;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-align: center;line-height: 100px;z-index: 2;font-size: 30px;}.left {left: 0;top: 200px;}.right {right: 0;top: 200px;}b {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #ccc;}.focus {position: absolute;bottom: 30px;right: 100px;z-index: 2;}.active {background-color: tomato;}</style>
</head><body><div class="box"><ul><li><img style="z-index:1" src="./imgs/1.jpg" alt=""></li><li><img src="./imgs/2.webp" alt=""></li><li><img src="./imgs/3.webp" alt=""></li><li><img src="./imgs/4.webp" alt=""></li></ul><span class="left"> < </span><span class="right">></span><div class="focus"><b class="active"></b><b></b><b></b><b></b></div></div><script>// 1-点击焦点 有选中的样式 同时还需要切换图片// 2-自动轮播// 3-点击左右箭头// 4-鼠标移入 停止播放 移除 继续播放var focus = document.querySelectorAll("b");var imgs = document.querySelectorAll("img");focus.forEach((list, i) => {list.onclick = function () {// 提前把所有的b身上的classname都去掉// 提前把所有的img身上的zindex归0focus.forEach((item, idx) => {item.className = "";imgs[idx].style.zIndex = 0})focus[i].className = "active";imgs[i].style.zIndex = 1;}});// 自动轮播 每隔一秒钟切换图片和下边的焦点// 自动轮播和点击焦点 做的事儿是一样的！！！！var num = 0; //充当就是索引let timer = setInterval(() => {num++;if (num > 3) {num = 0;}focus.forEach((item, idx) => {item.className = "";imgs[idx].style.zIndex = 0})focus[num].className = "active";imgs[num].style.zIndex = 1;}, 1000)let box = document.querySelector(".box");// 鼠标移入停止轮播box.onmouseover = function () {clearInterval(timer);}// 鼠标移出 继续轮播 继续开启定时器box.onmouseout = function () {timer = setInterval(() => {num++;if (num > 3) {num = 0;}focus.forEach((item, idx) => {item.className = "";imgs[idx].style.zIndex = 0})focus[num].className = "active";imgs[num].style.zIndex = 1;}, 1000)}// 点击左右箭头// 切换图片，，，和 焦点样式let left = document.querySelector(".left");left.onclick = function () {num--;if(num<0){num = 3}focus.forEach((item, idx) => {item.className = "";imgs[idx].style.zIndex = 0})focus[num].className = "active";imgs[num].style.zIndex = 1;}</script>
</body></html>02-轮播图封装
<!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>* {padding: 0;margin: 0;list-style: none;}.box {width: 1000px;height: 500px;border: 2px solid red;position: relative;}img {width: 1000px;height: 500px;position: absolute;left: 0;top: 0;}span {position: absolute;width: 50px;height: 100px;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-align: center;line-height: 100px;z-index: 2;font-size: 30px;}.left {left: 0;top: 200px;}.right {right: 0;top: 200px;}b {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #ccc;}.focus {position: absolute;bottom: 30px;right: 100px;z-index: 2;}.active {background-color: tomato;}</style>
</head><body><div class="box"><ul><li><img style="z-index:1" src="./imgs/1.jpg" alt=""></li><li><img src="./imgs/2.webp" alt=""></li><li><img src="./imgs/3.webp" alt=""></li><li><img src="./imgs/4.webp" alt=""></li></ul><span class="left"> < </span><span class="right">></span><div class="focus"><b class="active"></b><b></b><b></b><b></b></div></div><script>// 1-点击焦点 有选中的样式 同时还需要切换图片// 2-自动轮播// 3-点击左右箭头// 4-鼠标移入 停止播放 移除 继续播放function change(i) {// 提前把所有的b身上的classname都去掉// 提前把所有的img身上的zindex归0focus.forEach((item, idx) => {item.className = "";imgs[idx].style.zIndex = 0})focus[i].className = "active";imgs[i].style.zIndex = 1;}var focus = document.querySelectorAll("b");var imgs = document.querySelectorAll("img");focus.forEach((list, i) => {list.onclick = function () {change(i)}});// 自动轮播 每隔一秒钟切换图片和下边的焦点// 自动轮播和点击焦点 做的事儿是一样的！！！！var num = 0; //充当就是索引let timer = setInterval(() => {num++;if (num > 3) {num = 0;}change(num);}, 1000)let box = document.querySelector(".box");// 鼠标移入停止轮播box.onmouseover = function () {clearInterval(timer);}// 鼠标移出 继续轮播 继续开启定时器box.onmouseout = function () {timer = setInterval(() => {num++;if (num > 3) {num = 0;}change(num)}, 1000)}// 点击左右箭头// 切换图片，，，和 焦点样式let left = document.querySelector(".left");left.onclick = function () {num--;if (num < 0) {num = 3}change(num);}</script>
</body></html>03-swiper轮播库(框架)使用
搜索：swiper官网
轮播图：左右点击/图片切换播放
开发有很多js库 现在是挺麻烦的。你想用别人的东西下下载再说，引入
教你怎么看怎么使用
下载方法
怎么套
这些都是轮播图的配置
复制过来右键格式化一下。这些类名什么不要乱改。不需要的你才删掉。
<!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><link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"><!--3.样式也可以复制过来看看--><style>.swiper {width: 600px;height: 300px;
} </style>
</head><body><!--2.添加html内容也是从库复制过来的--><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>//注意引入库的顺序，你得先引入库，才能使用里面的构造函数。不然就是报错未定义 Swiper库未定义<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>//4.初始化Swiper也是复制过来的放到标签下边<script>var mySwiper = new Swiper('.swiper', { //第一步：通过new创建一个Swiper对象//第二步：一个个参数配置// direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// autoplay:true,autoplay:{delay:1000},// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},}) </script></body></html>04-面向对象
<!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>
</head>
<body><script>// 构造函数和对象 ==》 使用构造函数创建一个对象！！// 1- 构造函数 就是一个普通的函数 这个函数描述了对象的特点（对象的模板）// 2- 字面量创建对象// 3- 自定义构造函数// 内置的构造函数let obj = new Object();obj.name = "李福";obj.age = 18;obj.eat = function(){console.log("我喜欢吃鱼！！");}// console.log(obj);// 字面量创建let obj1 = {};obj1.name = "李白";obj1.age = 19;obj1.sing=function(){console.log("我喜欢唱歌！！！");}// console.log(obj1);let obj2 = {name:"杨浩",age:20,dance:function(){return "我喜欢跳舞！!!"}}// console.log(obj2.name,obj2.age,obj2.dance());// 3- 自定义构造函数 -- 可以批量的定制对象的属性和方法 （是一个模板）// 构造函数内部定义了 对象需要的属性和方法！！！// 使用构造函数创建的一个个对象 他们都具有构造函数里边定义好的属性和方法！// 构造函数的特点：// 1- 首字母大写的函数是构造函数// 2- 每次用这个构造函数时，需要加new 关键字 可以创建一个新的对象！！// 构造函数内 都是属性和方法function Person(name,age){// 每new一次时，都会创建一个新的对象，-存入到this变量上 // let this = {}// 构造函数内的this是指加 new 调用时候所创建的对象//console.log(this);this.name = name;this.age = age;this.eat = function(){return "我喜欢吃面条"}// XXXX}let p1 = new Person("李福",18);let p2 = new Person("李白",19);let p3 = new Person("杨浩",20);console.log(p1.eat());console.log(p2);console.log(p3);</script>
</body>
</html>05-轮播图-面向对象版
<!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>* {padding: 0;margin: 0;list-style: none;}.box {width: 1000px;height: 500px;border: 2px solid red;position: relative;}img {width: 1000px;height: 500px;position: absolute;left: 0;top: 0;}span {position: absolute;width: 50px;height: 100px;background-color: rgba(0, 0, 0, 0.5);color: #fff;text-align: center;line-height: 100px;z-index: 2;font-size: 30px;}.left {left: 0;top: 200px;}.right {right: 0;top: 200px;}b {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #ccc;}.focus {position: absolute;bottom: 30px;right: 100px;z-index: 2;}.active {background-color: tomato;}</style>
</head><body><div class="box"><ul><li><img style="z-index:1" src="./imgs/1.jpg" alt=""></li><li><img src="./imgs/2.webp" alt=""></li><li><img src="./imgs/3.webp" alt=""></li><li><img src="./imgs/4.webp" alt=""></li></ul><span class="left"> < </span><span class="right">></span><div class="focus"><b class="active"></b><b></b><b></b><b></b></div></div><script>// 1-点击焦点 有选中的样式 同时还需要切换图片// 2-自动轮播// 3-点击左右箭头// 4-鼠标移入 停止播放 移除 继续播放// 一个功能就是一个构造函数！！！！// 1-点击焦点 有选中的样式 同时还需要切换图片// 构造函数里都是 属性 和方法！！！function MyMiSwiper() {// let this = {}this.focus = document.querySelectorAll("b");this.imgs = document.querySelectorAll("img");this.miEvent = ()=> {this.focus.forEach((list, i) => {list.onclick = ()=> {// 提前把所有的b身上的classname都去掉// 提前把所有的img身上的zindex归0this.focus.forEach((item, idx) => {item.className = "";this.imgs[idx].style.zIndex = 0})this.focus[i].className = "active";this.imgs[i].style.zIndex = 1;}});}this.miEvent();}let m1 = new MyMiSwiper()console.log(m1);// 自动轮播 每隔一秒钟切换图片和下边的焦点// 自动轮播和点击焦点 做的事儿是一样的！！！！// var num = 0; //充当就是索引// let timer = setInterval(() => {// num++;// if (num > 3) {// num = 0;// }// focus.forEach((item, idx) => {// item.className = "";// imgs[idx].style.zIndex = 0// })// focus[num].className = "active";// imgs[num].style.zIndex = 1;// }, 1000)// let box = document.querySelector(".box");// // 鼠标移入停止轮播// box.onmouseover = function () {// clearInterval(timer);// }// // 鼠标移出 继续轮播 继续开启定时器// box.onmouseout = function () {// timer = setInterval(() => {// num++;// if (num > 3) {// num = 0;// }// focus.forEach((item, idx) => {// item.className = "";// imgs[idx].style.zIndex = 0// })// focus[num].className = "active";// imgs[num].style.zIndex = 1;// }, 1000)// }// // 点击左右箭头// // 切换图片，，，和 焦点样式// let left = document.querySelector(".left");// left.onclick = function () {// num--;// if (num < 0) {// num = 3// }// focus.forEach((item, idx) => {// item.className = "";// imgs[idx].style.zIndex = 0// })// focus[num].className = "active";// imgs[num].style.zIndex = 1;// }</script>
</body></html>
 specified for column)
)
串口实验)
