## javascript中面向对象-CSDN博客

本文链接：https://blog.csdn.net/zzj211314/article/details/105623794

javascript中面向对象

在逆战班学习的第六周到第八周我们学习了在javascript中的面向对象编程。
在js中，我们一般用封装函数和调用函数的方法来实现整个程序的实现。
学了面向对象编程之后，我们把封装好的函数作为一个构造函数来用构造函数生成一个实例化对象，通过输出实例化对象来进行程序的执行。这里一般可以引用class方法来进行构造函数，然后用new方法和调用构造函数来生成实例化对象，最后输出这个对象来进行编程。下面是我做的一个小案例很好的演示了面向对象的编程方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ol,ul,li{
            list-style: none;
        }

        a{
            text-decoration: none;
        }

        .banner{
            width: 520px;
            height: 400px;
            margin: 50px auto;
            position: relative;
            border: 3px solid black;
        }

        .banner ul{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .banner ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left:0;
            opacity: 0;
            transition: all 1s linear;
        }

        .banner ol{
            height: 50px;
            background: rgba(0,0,0,.4);
            position: absolute;
            bottom:30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border-radius:15px ;
            z-index: 2;
        }   

        .banner ol li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            margin: 0 20px;
            cursor: pointer;
        }
        .banner ol li.active{
            background: red;
        }

        .banner div{
            width: 100%;
            height: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .banner div a{
            width: 40px;
            height: 40px;
            font-size: 30px;
            font-weight: 900;
            color: #fff;
            background: rgba(0,0,0,.4);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img{width: 100%;height: 100%;}

    </style>
</head>
<body>
    <div class="banner">
        <ul>
            <li style="opacity: 1;"><img src="./1.jpg" alt=""></li>
            <li><img src="./5.jpg" alt=""></li>
            <li><img src="./3.jpg" alt=""></li>
            <li><img src="./7.jpg" alt=""></li>
        </ul>
        <ol></ol>
        <div>
            <a href="JavaScript:;" name="left">&lt;</a>
            <a href="JavaScript:;" name="right">&gt;</a>
        </div>
    </div>
<!-- <script src="./1.js"></script> -->
    <script>
        const oDiv = document.querySelector('.banner');
        class Banner{
            constructor(ele){
                this.ele = ele;
                this.oUl = ele.querySelector('ul');
                this.oOl = ele.querySelector('ol');
                this.oLeftRight = ele.querySelector('div');
                this.oUllis = ele.querySelectorAll('ul li');
                this.left = ele.querySelector('[name = left]');
                this.right = ele.querySelector('[name = right]');
                this.lunbotu = 0;
                this.index = 0;
            }
            init(){
                this.li();
                this.move();
                this.lunbo();
                this.mouseinout();
                this.click();
            }
            li(){
                this.oUllis.forEach((item, key) => {
                    const li = document.createElement('li');
                    li.setAttribute('name', 'olli');
                    li.setAttribute('index', key);
                    if (key == 0) {
                        li.className = 'active';
                    }
                    this.oOl.appendChild(li);
                })
            }
            move(a){
                this.oUllis[this.index].style.opacity = 0 ;
                if(a == 'right'){
                    this.index++;
                }
                if(a == 'left'){
                    this.index -- ;
                }
                if(this.index == -1){
                    this.index = this.oUllis.length-1;
                }
                if(this.index == this.oUllis.length){
                    this.index = 0 ; 
                }
                this.oUllis[this.index].style.opacity = 1 ;
                this.setActive();
            }
            lunbo(){
                 this.lunbotu = setInterval(()=>{
                     this.move('right');
                 } , 2000)
            }
            mouseinout(){
                this.ele.addEventListener('mouseover', ()=>{
                    clearInterval(this.lunbotu);
                })
                this.ele.addEventListener('mouseout',()=>{
                    this.lunbo();
                })
            }
            click(){
                this.left.addEventListener('click' , ()=>{
                    this.move('left');
                })
                this.right.addEventListener('click' , ()=>{
                    this.move('right');
                })
                const oOllis = this.ele.querySelectorAll('ol li');
                oOllis.forEach((item,key)=>{
                    item.addEventListener('click' , ()=>{
                        this.oUllis[this.index].style.opacity = 0;
                        this.index = key;
                        this.oUllis[this.index].style.opacity = 1;
                        this.setActive();
                    })
                })      
                
            }
            setActive(){
            const oOllis = this.ele.querySelectorAll('ol li');
            oOllis.forEach((item,key)=>{
            item.className = '';
            if(key == this.index){
                item.className = 'active';
            }
        })        
    }

        }






        const oBanner = new Banner(oDiv);
        oBanner.init();
    </script>
</body>
</html>