js實現輪播圖的兩種方式(構造函數、面向對象)

來源：懂視網責編：小OO 時間：2020-11-27 22:28:23

js實現輪播圖的兩種方式(構造函數、面向對象)

本文實例為大家分享了js實現輪播圖的具體代碼，供大家參考，具體內容如下：1、構造函數。<，0，0，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、面向對象；

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了js實現輪播圖的具體代碼，供大家參考，具體內容如下：1、構造函數。<，0，0，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、面向對象；

本文實例為大家分享了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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js實現輪播圖的兩種方式(構造函數、面向對象)

推薦度：

點擊下載本文 文檔為doc格式

標簽： js 圖片輪播面向對象

熱門焦點

js實現輪播圖的兩種方式(構造函數、面向對象)

js實現輪播圖的兩種方式(構造函數、面向對象)

js實現輪播圖的兩種方式(構造函數、面向對象)

最新推薦

猜你喜歡

熱門推薦