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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
初探jquery——表单应用范例
Feb 20 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
js Math 对象的方法
Sep 01 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
JS实现前端路由功能示例【原生路由】
May 29 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 Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
详解vue 模版组件的三种用法
2017/07/21 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python实现的udp协议Server和Client代码实例
2014/06/04 Python
python列表操作实例
2015/01/14 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python中的对数log函数表示及用法
2020/12/09 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
西式婚礼证婚词
2014/01/12 职场文书
装修设计师求职信
2014/02/26 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL