本文實例為大家分享了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武林網。
新聞熱點
疑難解答
