Maison > Article > interface Web > Deux façons js d'implémenter des images de carrousel

Deux façons js d'implémenter des images de carrousel

小云云original: 2018-01-27 14:36:473376parcourir

Cet article présente principalement en détail les deux façons d'implémenter des graphiques carrousel dans js, l'une est le constructeur et l'autre est la méthode orientée objet. Il a une certaine valeur de référence. Les amis intéressés pourront s'y référer. tout le monde.

1. Constructeur

<!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. Orienté objet

<!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>

Recommandations associées :

Explication du graphique carrousel à mise au point coulissante dans la mise en œuvre pratique du cadre de mouvement encapsulé

JS réalise l'effet du graphique carrousel coulissant avec le doigt sur terminal mobile

Effet carrousel de la version Jquery et extension du partage d'exemples d'extension

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Easy UI clique sur le texte pour réaliser la fonction d'expansion et de fermetureArticle suivant：Easy UI clique sur le texte pour réaliser la fonction d'expansion et de fermeture

Articles Liés

Voir plus