Home > Article > Web Front-end > Two js ways to implement carousel images

Two js ways to implement carousel images

小云云Original: 2018-01-27 14:36:473375browse

This article mainly introduces in detail the two ways to implement carousel charts in js, one is the constructor, and the other is the object-oriented way. It has certain reference value. Interested friends can refer to it. Hope it helps everyone.

1. Constructor

<!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. Object-oriented

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

Related Recommended:

Explanation of the actual sliding focus carousel chart of encapsulated motion framework

js realizes the effect of finger sliding carousel chart on the mobile terminal

jquery version carousel effect and extend extension example sharing

The above is the detailed content of Two js ways to implement carousel images. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Easy UI clicks on the text to realize the expand and close functionNext article：Easy UI clicks on the text to realize the expand and close function

See more

Two js ways to implement carousel images

Related articles