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 读后台cookie代码
Sep 15 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
Vuex简单入门
Apr 19 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
简单实现异步编程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
php5数字型字符串加解密代码
2008/04/24 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
js实现拖拽功能
2017/03/01 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
python批量提取word内信息
2015/08/09 Python
python 寻找优化使成本函数最小的最优解的方法
2017/12/28 Python
详解django三种文件下载方式
2018/04/06 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
python命令行参数用法实例分析
2019/06/25 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
探亲邀请信范文
2014/01/30 职场文书
社区志愿者培训方案
2014/06/10 职场文书
大专生求职信
2014/06/29 职场文书
课外访万家心得体会
2014/09/03 职场文书
2016年元旦主持词
2015/07/06 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
《花钟》教学反思
2016/02/17 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript