文章标题

来源：互联网发布：java验证码识别库编辑：程序博客网时间：2024/06/04 19:21
js两种形式写淡入淡出轮播图

//一般形式<!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>
0 0