js实现同一页面可多次调用的图片幻灯切换效果


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现同一页面可多次调用的图片幻灯切换效果。分享给大家供大家参考。具体实现方法如下:

<!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>

<title>js同一页面可多次调用的图片幻灯切换效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<script language="javascript">

//声明命名空间

var $o = new Object();

//基础方法

$o.base = {

 e:function(a,f){

  for(var i=0,j=a.length;i<j;i++){f.call(a[i],i);}

 }

}

$o. slide = function (id,arg){

 var arg = arg||{},

  t = document.getElementById(id),

  a = t.getElementsByTagName("a"),

  lis = [],

  cl = arg.color||'#f30',

  ctm = arg.time*1000||2000,

  w = t.clientWidth,

  h = t.clientHeight,

  b = ['<ul style="margin:0; padding:0; list-style:none; display:block; position:absolute; bottom:10px; right:10px;">'],

  index = 0,

  $ = null,

  $ = null;

  function change(i){

   if(!!$){clearTimeout($);}

   index = !isNaN(i)?i:index+1;

   if(index >= a.length){index = 0;}

   $o.base.e(lis,function(k){if(k == index){c(1,this);}else{c(0,this)}});

   var to = - index*h;

   if(a[0].offsetTop == to){

    return;

   }else{

    if(!!$){clearInterval($);}

    $ = setInterval(function(){

     var ot = a[0].offsetTop;

     v = Math[to<ot?'floor':'ceil']((to - ot)*0.2);

     if(ot == to){clearInterval($);$=null;st();}

     ot += v;

     a[0].style.marginTop = ot + "px";

    },30)

   };

  }

  function c(b,o){

   o.style.backgroundColor = !!b?cl:"#fff";

   o.style.color = !!b?"#fff":cl;

  }

  function st(){

   if(!!$)clearTimeout($);

   $ = setTimeout(function(){change()},ctm);

  }

  with(t.style){overflow = 'hidden';position = 'relative';}

  $o.base.e(a,function(n){

   this.style.display = "block";

   with(this.firstChild.style){borderWidth = '0';width = w + 'px';height = h + 'px';}

   b.push('<li style="width:20px; height:20px; line-height:20px; display:block; float:left; margin-left:5px; border:1px solid ' + cl + '; background-color:#fff; color:' + cl +'; font-size:14px; text-align:center; cursor:pointer;">' + (n+1) + '</li>'); 

  });

  b.push('</ul>');

  t.innerHTML += b.join("");

  lis = t.getElementsByTagName("li");

  $o.base.e(lis,function(n){

   if(n == index){c(1,this)}

   this.onmouseover = function(){

    if(n!=index)change(n);

   }

  });

  st();

}

</script>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="aa" style="width:402px;height:228px;">

 <a href="javascript:alert('1')"><img src="/images/1.jpg"></a>

 <a href="javascript:alert('2')"><img src="/images/2.jpg"></a>

 <a href="javascript:alert('3')"><img src="/images/3.jpg"></a>

 <a href="javascript:alert('4')"><img src="/images/4.jpg"></a>

 <a href="javascript:alert('5')"><img src="/images/5.jpg"></a>

 <a href="javascript:alert('6')"><img src="/images/6.jpg"></a>

 <a href="javascript:alert('7')"><img src="/images/7.jpg"></a>

 <a href="javascript:alert('8')"><img src="/images/8.jpg"></a>

 <a href="javascript:alert('9')"><img src="/images/9.jpg"></a>

</div>

<script language="javascript">

new $o.slide("aa");

</script>

<br>

<div id="bb" style="width:402px;height:228px;">

 <a href="###"><img src="/images/1.jpg"></a>

 <a href="###"><img src="/images/2.jpg"></a>

 <a href="###"><img src="/images/3.jpg"></a>

 <a href="###"><img src="/images/4.jpg"></a>

 <a href="###"><img src="/images/5.jpg"></a>

</div>

<script language="javascript">

new $o.slide("bb",{color:'#000',time:0.2});

</script>

<br>

<div id="cc" style="width:402px;height:228px;">

 <a href="###"><img src="/images/1.jpg"></a>

 <a href="###"><img src="/images/2.jpg"></a>

 <a href="###"><img src="/images/3.jpg"></a>

 <a href="###"><img src="/images/4.jpg"></a>

 <a href="###"><img src="/images/5.jpg"></a>

</div>

<script language="javascript">

new $o.slide("cc",{color:'green'});

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 Javascript
js获取当前日期前七天的方法
Feb 28 #Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 #Javascript
使用命令对象代替switch语句的写法示例
Feb 28 #Javascript
Underscore.js常用方法总结
Feb 28 #Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 #Javascript
jQuery实现tab标签自动切换的方法
Feb 28 #Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 #Javascript
You might like
15种PHP Encoder的比较
2007/03/06 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Express之托管静态文件的方法
2018/06/01 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Django实现组合搜索的方法示例
2018/01/23 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
大学新闻系自荐书
2014/05/31 职场文书
安全环保演讲稿
2014/08/28 职场文书
求职简历自我评价范文
2015/03/10 职场文书