zoukankan html css js c++ java

轮播图(构造函数、面向对象方式)

1、构造函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type='text/css'>
            *{ margin:0; padding:0;}
            
            #wrap{
                width:500px;
                height:360px;
                margin:100px auto;
                position:relative;
            }

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

            #pic img{
                width: 100%;
                height: 100%;
                position:absolute;
                top:0;
                left:0;
                display:none;
            }

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

            #tab ul li{
                width:10px;
                height:10px;
                margin:0 5px;
                background:#bbb;
                border-radius:100%;
                cursor:pointer;
                list-style:none;
                float:left;
            }
            #tab ul li.on{ background:#f60;}

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

        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="pic">
                <img src="img/1.jpg" alt="" />
                <img src="img/2.jpg" alt="" />
                <img src="img/3.jpg" alt="" />
                <img src="img/4.jpg" alt="" />
            </div>
            <div id="tab">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="btn">
                <div id='left'>&lt;</div>
                <div id='right'>&gt;</div>
            </div>
        </div>
        <script>
            var oWrap=document.getElementById('wrap')
            var picImg=document.getElementById('pic').getElementsByTagName('img');
            var tabLi=document.getElementById('tab').getElementsByTagName('li');
            var btnDiv=document.getElementById('btn').getElementsByTagName('div');
            var index=0;
            var timer=null;//设置一个timer变量,让他的值为空
            //初始化
            picImg[0].style.display='block';
            tabLi[0].className='on';
            
            for(var i=0;i<tabLi.length;i++){

                tabLi[i].index=i; 
                tabLi[i].onclick=function(){
                    
                    //不然要for循环清空
        /*            for(var i=0;i<tabLi.length;i++){
                        picImg[i].style.display='none'; 
                        tabLi[i].className='';
                    }*/
                    picImg[index].style.display='none'; //每个li都有index自定义属性
                    tabLi[index].className='';
                    index=this.index;
                    picImg[index].style.display='block';
                    tabLi[index].className='on';
                    
                }                
            };
            for(var i=0;i<btnDiv.length;i++){

                btnDiv[i].index=i;
                btnDiv[i].onselectstart=function(){ //禁止选择
                    return false;
                }
                btnDiv[i].onclick=function(){
                    
                    picImg[index].style.display='none'; //每个li都有index自定义属性
                    tabLi[index].className='';
                    //index=this.index;
                    if(this.index){
                        index++; //进来就加1，index就相当1%4 2%4 3%4 4%4
                        //if(index>tabLi.length){index=0}
                        //index=index%arrUrl.length; 自己取模自己等于0 alert(3%3) == 0 
                        index%=tabLi.length;//相当于当大于tabLi.length就等于0
                    }else{
                        index--;
                        if(index<0)index=tabLi.length-1;                 
                    }     
                    picImg[index].style.display='block';
                    tabLi[index].className='on';
                    
                }                
            };
            auto();
            oWrap.onmouseover=function(){
                clearInterval(timer)
            }
            oWrap.onmouseleave=function(){
                auto();
            }
            function auto(){
                timer=setInterval(function(){  //一般都是向左轮播,index++
                       picImg[index].style.display='none';
                       tabLi[index].className='';
                       index++;
                       index%=tabLi.length;
                       picImg[index].style.display='block';
                       tabLi[index].className='on';
                },2000)
            };
        </script>
    </body>
</html>

2、面向对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type='text/css'>
            *{ margin:0; padding:0;}
            
            #wrap{
                width:500px;
                height:360px;
                margin:100px auto;
                position:relative;
            }

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

            #pic img{
                width: 100%;
                height: 100%;
                position:absolute;
                top:0;
                left:0;
                display:none;
            }

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

            #tab ul li{
                width:10px;
                height:10px;
                margin:0 5px;
                background:#bbb;
                border-radius:100%;
                cursor:pointer;
                list-style:none;
                float:left;
            }
            #tab ul li.on{ background:#f60;}

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

        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="pic">
                <img src="img/1.jpg" alt="" />
                <img src="img/2.jpg" alt="" />
                <img src="img/3.jpg" alt="" />
                <img src="img/4.jpg" alt="" />
            </div>
            <div id="tab">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="btn">
                <div id='left'>&lt;</div>
                <div id='right'>&gt;</div>
            </div>
        </div>
        <script>
            var oWrap=document.getElementById('wrap')
            var picImg=document.getElementById('pic').getElementsByTagName('img');
            var tabLi=document.getElementById('tab').getElementsByTagName('li');
            var btnDiv=document.getElementById('btn').getElementsByTagName('div');
            
            function Banner(oWrap,picImg,tabLi,btnDiv){
                this.wrap=oWrap
                this.list=picImg
                this.tab=tabLi
                this.btn=btnDiv
                this.index=0; //这些都必须是私有的，不然两个banner会一样
                this.timer=null;
                this.length=this.tab.length;
                
            //    this.init();//下面创建好，要在这里执行
                
            }
            
            //初始化分类
            Banner.prototype.init=function(){ //先把下面的分类
                var This=this; //var 一个This变量把this存起来
                this.list[0].style.display='block';
                this.tab[0].className='on';
                
                for(var i=0;i<this.length;i++){
                this.tab[i].index=i; 
                this.tab[i].onclick=function(){
                    //this.list[index].style.display='none'; 这里的this指向tab的this 
                    This.list[This.index].style.display='none'; 
                    This.tab[This.index].className='';
                    //index=this.index;
                    This.index=this.index;
                    This.list[This.index].style.display='block';
                    //This.tab[This.index].className='on';    
                    this.className='on';
                }    
            };
            
            for(var i=0;i<this.btn.length;i++){
                this.btn[i].index=i;
                this.btn[i].onselectstart=function(){ 
                    return false;
                }
                this.btn[i].onclick=function(){
                    This.list[This.index].style.display='none'; 
                    This.tab[This.index].className='';
                    if(this.index){
                        This.index++;
                        This.index%=This.length; 
                    }else{
                        This.index--;
                        if(index<0)This.index=This.length-1;                 
                    }     
                    This.list[This.index].style.display='block';
                    This.tab[This.index].className='on';    
                }
            }
                this.auto();
                this.clear();                
            };
            Banner.prototype.auto=function(){
                    var This=this; 

                    This.timer=setInterval(function(){  //一般都是向左轮播,index++
                        This.list[This.index].style.display='none';
                        This.tab[This.index].className='';
                        This.index++;
                        This.index%=This.length;
                        This.list[This.index].style.display='block';
                        This.tab[This.index].className='on';
                    },2000)
            };
            
            Banner.prototype.clear=function(){
                   var This=this;             
                   this.wrap.onmouseover=function(){
                      clearInterval(This.timer)
            }
                   this.wrap.onmouseleave=function(){
                        This.auto();
                } 
            };
            
            
            var banner1=new Banner(oWrap,picImg,tabLi,btnDiv);
            banner1.init();
        
        /*
         *  init()
         *  function init(){
            for(var i=0;i<tabLi.length;i++){
                tabLi[i].index=i; 
                tabLi[i].onclick=function(){
                    picImg[index].style.display='none'; 
                    tabLi[index].className='';
                    index=this.index;
                    picImg[index].style.display='block';
                    tabLi[index].className='on';    
                }                
            };
            
            
            }
            for(var i=0;i<btnDiv.length;i++){
                btnDiv[i].index=i;
                btnDiv[i].onselectstart=function(){ 
                    return false;
                }
                btnDiv[i].onclick=function(){
                    picImg[index].style.display='none'; 
                    tabLi[index].className='';
                    if(this.index){
                        index++;
                        index%=tabLi.length;
                    }else{
                        index--;
                        if(index<0)index=tabLi.length-1;                 
                    }     
                    picImg[index].style.display='block';
                    tabLi[index].className='on';
                }                
            };
            auto();
            oWrap.onmouseover=function(){
                clearInterval(timer)
            }
            oWrap.onmouseleave=function(){
                auto();
            }
            function auto(){
                timer=setInterval(function(){  //一般都是向左轮播,index++
                       picImg[index].style.display='none';
                       tabLi[index].className='';
                       index++;
                       index%=tabLi.length;
                       picImg[index].style.display='block';
                       tabLi[index].className='on';
                },2000)
            };
            
            */
        </script>
    </body>
</html>

查看全文

相关阅读:
[C#]RichTextBox实现拖放
 [C#]WinForm动态删除控件 Controls.Remove()
[C#]WinForm 中 comboBox控件之数据绑定
 [C#.Net]KeyDown(KeyUp)和KeyPress的区别
 [C#.NET]最简单的实现文本框的水印效果
 [C#.Net]对WinForm应用程序的App.config的使用及加密
 Spring MVC异常处理详解
 MAC与HMAC的介绍及其在AWS和Azure中的应用
 isDebugEnabled有什么用？
在Mysql中Using filesort代表什么意思？

原文地址：https://www.cnblogs.com/sayidf/p/7614913.html