search

Home >Web Front-end >JS Tutorial >JavaScript method to implement image carousel_javascript skills

JavaScript method to implement image carousel_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:47:491384browse

本文实例讲述了JavaScript实现图片轮播的方法。分享给大家供大家参考。具体如下：

这里没有使用到JQUERY，没有过渡效果，图片可自行替换 。

test2.html页面：

<!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 simple way to achieve a QQ avatar pop-up effect using javascript_javascript skillsNext article：A simple way to achieve a QQ avatar pop-up effect using javascript_javascript skills

Related articles

See more