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 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
Javascript 面向对象之重载
May 04 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
简单实现异步编程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 Imagick获取图片RGB颜色值
2014/07/28 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python正则表达式的使用范例详解
2014/08/08 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
python编写俄罗斯方块
2020/03/13 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
小学感恩节活动总结
2015/03/24 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
离婚案件原告代理词
2015/05/23 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript