两种js实现轮播图的方式

本文主要为大家详细介绍了js实现轮播图的两种方式，一是构造函数、另一种是面向对象方式方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1、构造函数

nbsp;html>          *{ 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 p{    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 p#left{ left:0;}   #btn p#right{ right:0;}      
   
                   
   
    

登录后复制登录后复制                              

>

        var oWrap=document.getElementById('wrap') var picImg=document.getElementById('pic').getElementsByTagName('img'); var tabLi=document.getElementById('tab').getElementsByTagName('li'); var btnp=document.getElementById('btn').getElementsByTagName('p'); 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;itabLi.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) };  

2、面向对象

nbsp;html>          *{ 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 p{    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 p#left{ left:0;}   #btn p#right{ right:0;}      
   
                   
   
    

登录后复制登录后复制                              

>

        var oWrap=document.getElementById('wrap') var picImg=document.getElementById('pic').getElementsByTagName('img'); var tabLi=document.getElementById('tab').getElementsByTagName('li'); var btnp=document.getElementById('btn').getElementsByTagName('p'); function Banner(oWrap,picImg,tabLi,btnp){ this.wrap=oWrap this.list=picImg this.tab=tabLi this.btn=btnp 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,btnp); 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<btnp.length;i++){ btnp[i].index=i; btnp[i].onselectstart=function(){ return false; } btnp[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) }; */  

相关推荐：

封装运动框架实战之滑动的焦点轮播图讲解

js实现移动端手指滑动轮播图效果

jquery版轮播图效果和extend扩展实例分享

以上就是两种js实现轮播图的方式的详细内容，更多请关注【创想鸟】其它相关文章！