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

2024-05-06 16:40:08

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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"    <img src="img/2.jpg"    <img src="img/3.jpg"    <img src="img/4.jpg"   </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"    <img src="img/2.jpg"    <img src="img/3.jpg"    <img src="img/4.jpg"   </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>

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

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JS动态添加的div点击跳转到另一页面实现代码

下一篇：基于原生js运动方式关键点的总结(推荐)