Home >Web Front-end >JS Tutorial >JavaScript image carousel code sharing_javascript skills

JavaScript image carousel code sharing_javascript skills

WBOYOriginal: 2016-05-16 15:47:381121browse

为大家分享的JavaScript图片轮播代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 
<style>
 
.img-div img{display:none;}
 
</style>
</head>
 
<body>
 
<div class="slide" id="slide">
<div class="img-div">
 <img src="model.jpg" />
 <img src="model2.jpg" />
 <img src="model.jpg" />
 <img src="model2.jpg" />
 <img src="model.jpg" />
</div>
 
<div class="slide-btn">
<a href="#" class="hover">1</a>
<a href="#" class="hover">2</a>
<a href="#" class="hover">3</a>
<a href="#" class="hover">4</a>
<a href="#" class="hover">5</a>
</div>
 
</div>
 
<script type="text/javascript">
 
 
var zBase=
{
 $id:function(id){return document.getElementById(id);},
 $tagName:function(tagName,obj){return ((obj&#63;obj:document).getElementsByTagName(tagName));},
 $c:function(clsN,obj)
 {
  var tag=this.$tagName('*'),reg=new RegExp('(^|\\s)'+clsN+'(\\s|$)'),arr=[];
 
  for(var i=0;i<tag.length;i++)
  {
   if(reg.test(tag[i].className))
   {
    arr.push(tag[i]); 
   } 
  }
  return arr;
   
 },
  
 $add:function(obj,clsN)
 {
  var reg=new RegExp('(^|\\s)'+clsN+'(\\s|$)');
   
  if(!reg.test(obj.className))
  {
   obj.className+=' '+clsN; 
  } 
 },
  
 $remove:function(obj,clsN)
 {
  var cla=obj.className;
  var reg='/|\\s*'+clsN+'\\b/g';
  obj.className=cla&#63;cla.replace(eval(reg),''):''; 
 },
  
 css:function(obj,attr,value)
 {
  if(value)
  {
   obj.style[attr]=value; 
  } 
  else
  {
   return typeof window.getComputedStyle!="undefined"&#63;window.getComputedStyle(obj,null)[attr]:obj.currentStyle[attr]; 
  }
 },
 easing:
  {
   liner:function(t,b,c,d){return c*t/d+b},
   easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b}
  },
   
  config:
  {
   index:0,
   auto:true,
   direct:'left' 
  },
   
  init:function()
  {
   this.slide=this.$id('slide');
   this.img_div=this.$c('img-div')[0];
   this.slide_btn=this.$tagName('a',this.$c('slide-btn')[0]);
   this.img_arr=this.$tagName('img',this.img_div);
    
   
    
   if(this.config.auto){this.play();}
   this.hover();
     
  },
   
  animate:function(obj,attr,val)
  {
   var d=1000;
    
   if(obj[attr+"timer"]){clearInterval(obj[attr+"timer"])};
    
   var start= parseInt(zBase.css(obj,attr));
   var space=val-start,st=(new Date().getTime()),m=space>0&#63;'cell':'floor';
    
   obj[attr+'timer']=setInterval(function(){
    var t=(new Date().getTime()-st);
    if(t<d)
    {
 
     zBase.css(obj,attr,Math[m](zBase.easing["easeOut"](t,start,space,d))+"px");
    }
    else
    {
     clearInterval(obj[attr+'timer']);
     zBase.css(obj,attr,top+space+"px");
    }    
    },20);
    
    
  },
   
  hover:function()
   {
    for(var i=0;i<this.slide_btn.length;i++)
    {
     this.slide_btn[i].index=i;
     this.slide_btn[i].onmouseover=function()
     {
      if(zBase.slide.timer)
      {
       clearInterval(zBase.slide.timer); 
      } 
       
      zBase.config.index=this.index;
       
       
      //console.log(this.slide_btn);
       
      for(var j=0;j<zBase.slide_btn.length;j++)
      {
       zBase.$remove(zBase.slide_btn[j],'hover');
         
      }
       
      zBase.$add(zBase.slide_btn[zBase.config.index],'hover');
      zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*1000);
   
     }
      
     this.slide_btn[i].onmouseout=function()
     {
      zBase.play(); 
     }
    }
    
   },
   play:function(){
    this.slide.timer = setInterval(function(){
      
     var tags=zBase.$tagName('img',this.img_div);
     //zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block";
      
      
     for(var i =0;i<tags.length;i++)
     {
     if(zBase.config.index==i)
     {
      zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block";
     } 
     else
     {
      zBase.$tagName('img',this.img_div)[i].style.display="none"; 
     }
     }
      
      
      zBase.config.index++;
     if(zBase.config.index>=zBase.img_arr.length) zBase.config.index=0;
     zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500);
     for(var j=0;j<zBase.slide_btn.length;j++){
      zBase.$remove(zBase.slide_btn[j],'hover') ;
     }
     zBase.$add(zBase.slide_btn[zBase.config.index],'hover');
    },3000)
   }
  
}
   zBase.init();
  
</script>
 
 </body>
</html>

以上就是为大家分享的JavaScript图片轮播代码，希望大家可以喜欢。

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：A brief discussion on the use of setInterval and setTimeout in JavaScript_Basic knowledgeNext article：A brief discussion on the use of setInterval and setTimeout in JavaScript_Basic knowledge

See more

JavaScript image carousel code sharing_javascript skills

Related articles