欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js实现轮播图的两种方式(构造函数、面向对象)

程序员文章站 2022-03-31 08:50:12
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下 1、构造函数 ...

本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下

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'><</div>
    <div id='right'>></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'><</div>
    <div id='right'>></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>


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Linux帮助和用户管理命令

下一篇： 无限循环轮播图之运动框架(原生JS实现)

推荐阅读