suchen

Heim >Web-Frontend >js-Tutorial >JavaScript-Bildkarussell-Code-Sharing_Javascript-Kenntnisse

JavaScript-Bildkarussell-Code-Sharing_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:47:381108Durchsuche

为大家分享的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图片轮播代码，希望大家可以喜欢。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine kurze Diskussion über die Verwendung von setInterval und setTimeout in JavaScript_GrundkenntnisseNächster Artikel：Eine kurze Diskussion über die Verwendung von setInterval und setTimeout in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen