面向对象的封装

最新推荐文章于 2022-08-08 19:09:18 发布

维克多噗噗

最新推荐文章于 2022-08-08 19:09:18 发布

阅读量253

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 800px;height: 500px;position: relative;margin: 30px auto;}
        #imgList li{width: 800px;height: 500px;position: absolute;display: none;}
        #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;}
        #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;}
         #btn li.active{background: #E837B3;color: #fff;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="imgList">
            <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/2.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/3.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/4.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/5.jpg" height="500" width="800" alt=""></li>
        </ul>
        <ul id="btn">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script type="text/javascript">
        /*
            面向对象 应用的最多的地方就是h5中 游戏开发 运动
                面向对象的封装
                1.构造函数
                2.扩展属性或者方法(公用,并且在内存地址只有一个)
         */

        var imgDoms = document.getElementById("imgList").children;
        var btnDoms = document.getElementById("btn").children;
        for(var i=0;i<btnDoms.length;i++){
            btnDoms[i].index = i;
            btnDoms[i].onclick = function(){
                for(var j=0;j<btnDoms.length;j++){
                    imgDoms[j].style.display = "none";
                    btnDoms[j].className = "";
                }
                this.className = "active";
                imgDoms[this.index].style.display = "block";
            };
        };

    </script>
</body>
</html>

开始提取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 800px;height: 500px;position: relative;margin: 30px auto;}
        #imgList li{width: 800px;height: 500px;position: absolute;display: none;}
        #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;}
        #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;}
         #btn li.active{background: #E837B3;color: #fff;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="imgList">
            <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/2.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/3.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/4.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/5.jpg" height="500" width="800" alt=""></li>
        </ul>
        <ul id="btn">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script type="text/javascript">
        /*
            面向对象 应用的最多的地方就是h5中 游戏开发 运动
                面向对象的封装
                1.构造函数
                2.扩展属性或者方法(公用,并且在内存地址只有一个)
         */

        // var imgDoms = document.getElementById("imgList").children;
        // var btnDoms = document.getElementById("btn").children;

        var imgDoms,btnDoms;
        window.onload = function(){
            imgDoms = document.getElementById("imgList").children;
            btnDoms = document.getElementById("btn").children;
            init();
        };

        function init(){
            for(var i=0;i<btnDoms.length;i++){
                btnDoms[i].index = i;
                btnDoms[i].onclick = toggle;
            };
        };

        function toggle(){
            for(var j=0;j<btnDoms.length;j++){
                imgDoms[j].style.display = "none";
                btnDoms[j].className = "";
            }
            this.className = "active";
            imgDoms[this.index].style.display = "block";
        };
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>面向对象Banner封装</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 800px;height: 500px;position: relative;margin: 30px auto;}
        #imgList li{width: 800px;height: 500px;position: absolute;display: none;}
        #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;}
        #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;}
        #btn li.active{background: #E837B3;color: #fff;}
        #btnbox {position: absolute; top: 50%; margin-top: -35px;left: 0; right: 0; height: 70px; opacity: 0; transition: all .3s;}
        .btn {width: 40px; height: 70px; font-size: 22px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; line-height: 70px; text-align: center; }
        #next {float: right;}
        #prev {float: left;}
    </style>
</head>
<body>
    <div id="box">
        <ul id="imgList">
            <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/2.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/3.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/4.jpg" height="500" width="800" alt=""></li>
            <li><img src="images/5.jpg" height="500" width="800" alt=""></li>
        </ul>
        <ul id="btn">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div id="btnbox" onselectstart = "return false">
            <div id="prev" class="btn"><</div>
            <div id="next" class="btn">></div>
        </div>
    </div>
    <script type="text/javascript">
        /*
            面向对象 应用的最多的地方就是h5中 游戏开发 运动
                面向对象的封装
                1.构造函数
                2.扩展属性或者方法(公用,并且在内存地址只有一个)
         */
         // var banner2 = new Banner();
         window.onload = function(){
            var banner1 = new Banner("box","imgList","btn","btnbox");
            banner1.init();
         };
         // 构造函数
        function Banner(boxDom,imgDom,btnDom,aboutDom){
            // 自有
            this.boxDom = document.getElementById(boxDom);
            this.index = 0;
            this.imgDoms = document.getElementById(imgDom).children;
            this.btnDoms = document.getElementById(btnDom).children;
            this.about = document.getElementById(aboutDom);
            this.timer = null;
         }

         //公用
        Banner.prototype.init = function(){
            // alert(this)
            // 第一种
            var This = this;
            for(var i=0;i<this.btnDoms.length;i++){
                // this.btnDoms[i].index = i;
                //  第二种
                this.btnDoms[i].onclick = this.toggle.bind(this,i);  //将this指向LI 改为Banner
                // this.btnDoms[i].onclick = function(){
                //     This.toggle(this);  //this => this.btnDoms[i]
                // };
            };
            // 暂停
            this.boxDom.onmouseenter = function(){
                // console.log(This.about);
                This.about.style.opacity = 1;
                clearInterval(This.timer);
                This.timer = null;
            };
            this.boxDom.onmouseleave = function(){
                // console.log(This.about);
                This.about.style.opacity = 0;
                This.timer = setInterval(function(){
                    This.auto.call(This);
                },2000);
            };
            // 轮播
            this.timer = setInterval(function(){
                This.auto.call(This);
            },2000);
            // 左右
            for(var j=0;j<this.about.children.length;j++){
                this.about.children[j].index = j;
                this.about.children[j].onclick = function(){  //this指向改变
                    if(this.index == 0){
                        This.prev();
                    }else{
                        This.auto();
                    }
                }
            }

        };
        Banner.prototype.toggle = function(i){
            //this==> LI || Banner
            // alert(i);
            for(var j=0;j<this.btnDoms.length;j++){
                this.imgDoms[j].style.display = "none";
                this.btnDoms[j].className = "";
            }
            this.btnDoms[i].className = "active";
            this.imgDoms[i].style.display = "block";
            this.index = i;
        };
        Banner.prototype.prev = function(){
            this.index--;
            if(this.index<0)this.index = this.btnDoms.length-1;
            this.toggle.call(this,this.index);  //直接执行
        };
        // Banner.prototype.next = function(){
        //     this.index++;
        //     this.index %= this.btnDoms.length;
        // };
        Banner.prototype.auto = function(){
            // this -> window
            // alert(this.toggle);
            this.index++;
            this.index %= this.btnDoms.length;
            this.toggle.call(this,this.index);  //直接执行
        };

    </script>
</body>
</html>