js两种形式写淡入弹出轮播图（面向对象和不面向对象）

最新推荐文章于 2022-04-07 15:19:53 发布

babybk

最新推荐文章于 2022-04-07 15:19:53 发布

阅读量1.3k

点赞数

分类专栏： javasctipt prototype 文章标签：面向对象 javascript

本文链接：https://blog.csdn.net/babybk/article/details/51260813

版权

javasctipt 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

prototype

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <title>please enter your title</title>
        <meta charset="utf-8">
        <meta name="Author" content="年轻人">
        <style type='text/css'>
            *{ margin:0; padding:0;}
            #box{
                width:500px;
                height:360px;
                margin:150px auto;
                border:2px solid #fcf;
                position:relative;
            }

            #pic{
                width:500px;
                height:360px;
                position:relative;
            }

            #pic img{
                position:absolute;
                top:0;
                left:0;
                display:none;
            }

            #tab{
                width:82px;
                height:12px;
                position:absolute;
                bottom:10px;
                left:50%;
                margin-left:-41px;
            }

            #tab li{
                list-style:none;
                width:12px;
                height:12px;
                background:#999;
                float:left;
                margin:0 2px;
                border-radius:100%;
                cursor:pointer;
            }

            #tab li.on{
                background:#f60;
            }

            #btn div{
                width:40px;
                height:70px;
                background:rgba(0,0,0,.5);
                color:#fff;
                font-size:20px;
                font-weight:bold;
                text-align:center;
                line-height:70px;
                position:absolute;
                top:50%;
                margin-top:-35px;
                cursor:pointer;
            }


        </style>
    </head>
    <body>

        <div id="box">
            <div id="pic">
                <img src="images/1.jpg" style="display:block" />
                <img src="images/2.jpg" />
                <img src="images/3.jpg" />
                <img src="images/4.jpg" />
                <img src="images/5.jpg" />
            </div>

            <div id="tab">
                <ul>
                    <li class="on"></li><li></li><li></li><li></li><li></li>
                </ul>
            </div>

            <div id="btn">
                <div style="left:0"> &lt; </div>
                <div style="right:0"> &gt; </div>
            </div>
        </div>

        <script type="text/javascript">



//不使用面向对象形式         
            /*
            var oImg = document.getElementById('pic').getElementsByTagName('img');
            var oLi = document.getElementById('tab').getElementsByTagName('li');
            var oBtn = document.getElementById('btn').getElementsByTagName('div');
            var index = 0;

            for ( var i=0;i<oLi.length;i++ )
            {
                oLi[i].index = i;
                oLi[i].onclick = function(){
                    index = this.index;
                    for ( var i=0;i<oLi.length;i++ )
                    {
                        oLi[i].className = '';
                        oImg[i].style.display = 'none';
                    }
                    this.className = 'on';
                    oImg[index].style.display = 'block';
                }
            }

            for ( var i=0;i<oBtn.length;i++ )
            {
                oBtn[i].index = i;
                oBtn[i].onclick = function(){
                    if ( this.index )
                    {
                        index ++;
                        index %= oLi.length;

                    }
                    else
                    {
                        index --;
                        if(index<0)index=oLi.length-1;
                    }
                    for ( var i=0;i<oLi.length;i++ )
                    {
                        oLi[i].className = '';
                        oImg[i].style.display = 'none';
                    }
                    oLi[index].className = 'on';
                    oImg[index].style.display = 'block';
                }
            }
            */


            /*
                function 构造函数(){
                    //不一样的属性/方法
                }

                构造函数.prototype.//一样的属性/方法
            */



//面向对象形式
            window.onload = function(){
                var oA = document.getElementById('pic');
                var oB = document.getElementById('btn');
                var oC = document.getElementById('tab');
                var oBanner = new Banner( oA , oB , oC );
                oBanner.init();
            }

            function Banner( oPic , oBtn , oTab ){
                this.oImg = oPic.getElementsByTagName('img');  // this -> 对象
                this.oLi = oTab.getElementsByTagName('li');  // this -> 对象
                this.oBtn = oBtn.getElementsByTagName('div');  // this -> 对象
                this.index = 0;  // this -> 对象
            }

            Banner.prototype = {

                init : function(){
                    var This = this; // This = this -> 对象
                    for ( var i=0;i<this.oLi.length;i++ )  // this -> 对象
                    {
                        this.oLi[i].index = i; // this -> 对象
                        this.oLi[i].onclick = function(){  // this -> 对象
                            This.toggle(this)  // This -> 对象  ;  this -> 被点击的oLi节点
                        };
                    }
                },

                toggle : function(obj){
                    this.index = obj.index; // this -> 对象 obj -> 被点击的oLi节点
                    for ( var i=0;i<this.oLi.length;i++ ) // this -> 对象
                    {
                        this.oLi[i].className = ''; // this -> 对象
                        this.oImg[i].style.display = 'none'; // this -> 对象 
                    }
                    this.oLi[this.index].className = 'on'; // this -> 对象
                    this.oImg[this.index].style.display = 'block'; // this -> 对象
                }

            }



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