兩種js實作輪播圖的方式-js教程-PHP中文網

首頁

web前端

js教程

兩種js實作輪播圖的方式

小云云

Jan 27, 2018 pm 02:36 PM

javascript實現方式

本文主要為大家詳細介紹了js實現輪播圖的兩種方式，一是構造函數、另一種是面向對象方式方式，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助大家。

1、建構子

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type=&#39;text/css&#39;>
   *{ 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:&#39;Microsoft yahei&#39;;
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn p#left{ left:0;}
   #btn p#right{ right:0;}

  </style>
 </head>
 <body>
  <p id="wrap">
   <p id="pic">
    <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
   </p>
   <p id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </p>
   <p id="btn">
    <p id=&#39;left&#39;><</p>
    <p id=&#39;right&#39;>></p>
   </p>
  </p>
  <script>
   var oWrap=document.getElementById(&#39;wrap&#39;)
   var picImg=document.getElementById(&#39;pic&#39;).getElementsByTagName(&#39;img&#39;);
   var tabLi=document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;li&#39;);
   var btnp=document.getElementById(&#39;btn&#39;).getElementsByTagName(&#39;p&#39;);
   var index=0;
   var timer=null;//设置一个timer变量,让他的值为空
   //初始化
   picImg[0].style.display=&#39;block&#39;;
   tabLi[0].className=&#39;on&#39;;
   
   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=&#39;none&#39;; 
      tabLi[i].className=&#39;&#39;;
     }*/
     picImg[index].style.display=&#39;none&#39;; //每个li都有index自定义属性
     tabLi[index].className=&#39;&#39;;
     index=this.index;
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
     
    }    
   };
   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=&#39;none&#39;; //每个li都有index自定义属性
     tabLi[index].className=&#39;&#39;;
     //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=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
     
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display=&#39;none&#39;;
      tabLi[index].className=&#39;&#39;;
      index++;
      index%=tabLi.length;
      picImg[index].style.display=&#39;block&#39;;
      tabLi[index].className=&#39;on&#39;;
    },2000)
   };
  </script>
 </body>
</html>

#2、物件導向

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type=&#39;text/css&#39;>
   *{ 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:&#39;Microsoft yahei&#39;;
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn p#left{ left:0;}
   #btn p#right{ right:0;}

  </style>
 </head>
 <body>
  <p id="wrap">
   <p id="pic">
    <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
   </p>
   <p id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </p>
   <p id="btn">
    <p id=&#39;left&#39;><</p>
    <p id=&#39;right&#39;>></p>
   </p>
  </p>
  <script>
   var oWrap=document.getElementById(&#39;wrap&#39;)
   var picImg=document.getElementById(&#39;pic&#39;).getElementsByTagName(&#39;img&#39;);
   var tabLi=document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;li&#39;);
   var btnp=document.getElementById(&#39;btn&#39;).getElementsByTagName(&#39;p&#39;);
   
   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=&#39;block&#39;;
    this.tab[0].className=&#39;on&#39;;
    
    for(var i=0;i<this.length;i++){
    this.tab[i].index=i; 
    this.tab[i].onclick=function(){
     //this.list[index].style.display=&#39;none&#39;; 这里的this指向tab的this 
     This.list[This.index].style.display=&#39;none&#39;; 
     This.tab[This.index].className=&#39;&#39;;
     //index=this.index;
     This.index=this.index;
     This.list[This.index].style.display=&#39;block&#39;;
     //This.tab[This.index].className=&#39;on&#39;; 
     this.className=&#39;on&#39;;
    } 
   };
   
   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=&#39;none&#39;; 
     This.tab[This.index].className=&#39;&#39;;
     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=&#39;block&#39;;
     This.tab[This.index].className=&#39;on&#39;; 
    }
   }
    this.auto();
    this.clear();    
   };
   Banner.prototype.auto=function(){
     var This=this; 

     This.timer=setInterval(function(){ //一般都是向左轮播,index++
      This.list[This.index].style.display=&#39;none&#39;;
      This.tab[This.index].className=&#39;&#39;;
      This.index++;
      This.index%=This.length;
      This.list[This.index].style.display=&#39;block&#39;;
      This.tab[This.index].className=&#39;on&#39;;
     },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=&#39;none&#39;; 
     tabLi[index].className=&#39;&#39;;
     index=this.index;
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;; 
    }    
   };
   
   
   }
   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=&#39;none&#39;; 
     tabLi[index].className=&#39;&#39;;
     if(this.index){
      index++;
      index%=tabLi.length;
     }else{
      index--;
      if(index<0)index=tabLi.length-1;     
     }  
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display=&#39;none&#39;;
      tabLi[index].className=&#39;&#39;;
      index++;
      index%=tabLi.length;
      picImg[index].style.display=&#39;block&#39;;
      tabLi[index].className=&#39;on&#39;;
    },2000)
   };
   
   */
  </script>
 </body>
</html>

相關推薦：

封裝運動框架實戰之滑動的焦點輪播圖講解

js實作行動裝置手指滑動輪播圖效果

jquery版輪播圖效果與extend擴充實例分享

以上是兩種js實作輪播圖的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。1）C 用于解析JavaScript源码并生成抽象语法树。2）C 负责生成和执行字节码。3）C 实现JIT编译器，在运行时优化和编译热点代码，显著提高JavaScript的执行效率。

JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。

See all articles