怎么使用js實(shí)現(xiàn)輪播圖

這篇文章給大家分享的是有關(guān)怎么使用js實(shí)現(xiàn)輪播圖的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營銷，提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營銷、微信小程序、公眾號商城、等建站開發(fā)，創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢。

js的作用是什么

1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。

1、構(gòu)造函數(shù)

<!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'>&lt;</div>
    <div id='right'>&gt;</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;//設(shè)置一個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循環(huán)清空
  /*   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++; //進(jìn)來就加1，index就相當(dāng)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;//相當(dāng)于當(dāng)大于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、面向?qū)ο?/p>

<!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'>&lt;</div>
    <div id='right'>&gt;</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();//下面創(chuàng)建好，要在這里執(zhí)行
    
   }
   
   //初始化分類
   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>

感謝各位的閱讀！關(guān)于“怎么使用js實(shí)現(xiàn)輪播圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：怎么使用js實(shí)現(xiàn)輪播圖
URL鏈接：http://www.chinadenli.net/article34/iieepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)網(wǎng)站制作、Google、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用js實(shí)現(xiàn)輪播圖

js的作用是什么