23_js面向對象

上次我們講運動函數，實際開發不會寫運動函數。只是講一下思想。

現在講一下用原生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"> &lt; </span><span class="right">&gt;</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"> &lt; </span><span class="right">&gt;</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"> &lt; </span><span class="right">&gt;</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>