兩種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="img/1.jpg" alt="" />
    <img src="img/2.jpg" alt="" />
    <img src="img/3.jpg" alt="" />
    <img src="img/4.jpg" 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="img/1.jpg" alt="" />
    <img src="img/2.jpg" alt="" />
    <img src="img/3.jpg" alt="" />
    <img src="img/4.jpg" 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>

登入後複製

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7754

Java教學

1643

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

華為手機如何實現雙微信登入？ Mar 24, 2024 am 11:27 AM

華為手機如何實現雙微信登入？隨著社群媒體的興起，微信已成為人們日常生活中不可或缺的溝通工具之一。然而，許多人可能會遇到一個問題：在同一部手機上同時登入多個微信帳號。對於華為手機用戶來說，實現雙微信登入並不困難，本文將介紹華為手機如何實現雙微信登入的方法。首先，華為手機自帶的EMUI系統提供了一個很方便的功能－應用程式雙開。透過應用程式雙開功能，用戶可以在手機上同

PHP程式設計指南：實作斐波那契數列的方法 Mar 20, 2024 pm 04:54 PM

程式語言PHP是一種用於Web開發的強大工具，能夠支援多種不同的程式設計邏輯和演算法。其中，實作斐波那契數列是一個常見且經典的程式設計問題。在這篇文章中，將介紹如何使用PHP程式語言來實作斐波那契數列的方法，並附上具體的程式碼範例。斐波那契數列是一個數學上的序列，其定義如下：數列的第一個和第二個元素為1，從第三個元素開始，每個元素的值等於前兩個元素的和。數列的前幾元

如何在華為手機上實現微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在華為手機上實現微信分身功能隨著社群軟體的普及和人們對隱私安全的日益重視，微信分身功能逐漸成為人們關注的焦點。微信分身功能可以幫助使用者在同一台手機上同時登入多個微信帳號，方便管理和使用。在華為手機上實現微信分身功能並不困難，只需要按照以下步驟操作即可。第一步：確保手機系統版本和微信版本符合要求首先，確保你的華為手機系統版本已更新至最新版本，以及微信App

掌握Golang如何實現遊戲開發的可能性 Mar 16, 2024 pm 12:57 PM

在現今的軟體開發領域中，Golang（Go語言）作為一種高效、簡潔、並發性強的程式語言，越來越受到開發者的青睞。其豐富的標準庫和高效的並發特性使它成為遊戲開發領域的一個備受關注的選擇。本文將探討如何利用Golang來實現遊戲開發，並透過具體的程式碼範例來展示其強大的可能性。 1.Golang在遊戲開發中的優勢作為靜態類型語言，Golang正在建構大型遊戲系統

如何在Golang中實現精確除法運算 Feb 20, 2024 pm 10:51 PM

在Golang中實現精確除法運算是一個常見的需求，特別是在涉及金融計算或其它需要高精度計算的場景中。 Golang的內建的除法運算子「/」是針對浮點數計算的，並且有時會出現精度遺失的問題。為了解決這個問題，我們可以藉助第三方函式庫或自訂函數來實現精確除法運算。一種常見的方法是使用math/big套件中的Rat類型，它提供了分數的表示形式，可以用來實現精確的除法運算

PHP遊戲需求實作指南 Mar 11, 2024 am 08:45 AM

PHP遊戲需求實現指南隨著網路的普及和發展，網頁遊戲的市場也越來越火爆。許多開發者希望利用PHP語言來開發自己的網頁遊戲，而實現遊戲需求是其中一個關鍵步驟。本文將介紹如何利用PHP語言來實現常見的遊戲需求，並提供具體的程式碼範例。 1.創造遊戲角色在網頁遊戲中，遊戲角色是非常重要的元素。我們需要定義遊戲角色的屬性，例如姓名、等級、經驗值等，並提供方法來操作這些

使用PHP實作SaaS：全面解析 Mar 07, 2024 pm 10:18 PM

實在抱歉，我無法提供即時的程式設計指導，但我可以為你提供一篇程式碼範例，讓你更能理解如何使用PHP實作SaaS。以下是一篇1500字以內的文章，標題為《使用PHP實作SaaS：全面解析》。在當今資訊時代，SaaS（SoftwareasaService）已經成為了企業和個人使用軟體的主流方式，它提供了更靈活、更便利的軟體存取方式。透過SaaS，用戶無需在本地

利用Golang實現資料導出功能詳解 Feb 28, 2024 pm 01:42 PM

標題：利用Golang實現資料匯出功能詳解隨著資訊化程度的提升，許多企業和組織需要將儲存在資料庫中的資料匯出到不同的格式中，以便進行資料分析、報表產生等用途。本文將介紹如何利用Golang程式語言實作資料匯出功能，包括連接資料庫、查詢資料和匯出資料到檔案的詳細步驟，並提供具體的程式碼範例。連接資料庫首先，我們需要使用Golang中提供的資料庫驅動程序，例如da

See all articles

兩種js實作輪播圖的方式

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題