23_js面向对象-CSDN博客

本文链接：https://blog.csdn.net/m0_65655109/article/details/146704275

上次我们讲运动函数，实际开发不会写运动函数。只是讲一下思想。

现在讲一下用原生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归0
                focus.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归0
            focus.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归0
                       this.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>