JavaScript图片轮播代码分享


Posted in Javascript onJuly 31, 2015

为大家分享的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?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?cla.replace(eval(reg),''):''; 
 },
  
 css:function(obj,attr,value)
 {
  if(value)
  {
   obj.style[attr]=value; 
  } 
  else
  {
   return typeof window.getComputedStyle!="undefined"?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?'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图片轮播代码,希望大家可以喜欢。

Javascript 相关文章推荐
jQuery Tools tooltip使用说明
Jul 14 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
javascript去掉前后空格的实例
Nov 07 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
JS中Attr的用法详解
Oct 09 Javascript
Javascript Promise用法详解
May 10 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
简单实现异步编程promise模式
Jul 31 #Javascript
JavaScript数据类型判定的总结笔记
Jul 31 #Javascript
jquery代码实现多选、不同分享功能
Jul 31 #Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 #Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 #Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 #Javascript
JavaScript实现图片轮播的方法
Jul 31 #Javascript
You might like
PHP常用数组函数介绍
2014/07/28 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
JS判定是否原生方法
2013/07/22 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python生成器(Generator)详解
2015/04/13 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python中argparse模块用法实例详解
2015/06/03 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python实现远程控制电脑
2019/05/23 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
通过实例学习Python Excel操作
2020/01/06 Python
学习Python列表的基础知识汇总
2020/03/10 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
医院检讨书范文
2014/02/01 职场文书
万年牢教学反思
2014/02/15 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
学籍证明模板
2014/11/21 职场文书
二审答辩状格式
2015/05/22 职场文书
初中班主任工作随笔
2015/08/15 职场文书
银行求职信范文
2019/05/13 职场文书
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android