文章标题

js两种形式写淡入淡出轮播图

//一般形式

<html>
    <head>
        <title>please enter your titletitle>
        <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"> < div>
                <div style="right:0"> > 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


            /*
                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>

你可能感兴趣的:(JavaScript)