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判断页面是否加载完成实现代码
Dec 11 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
javascript实现计算器功能详解流程
Nov 01 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
神族 Protoss 历史背景
2020/03/14 星际争霸
PHP 的 __FILE__ 常量
2007/01/15 PHP
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
图文讲解vue的v-if使用方法
2019/02/11 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python 实现倒排索引的方法
2018/12/25 Python
python实现加密的方式总结
2020/01/19 Python
python连接mongodb集群方法详解
2020/02/13 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
C#面试题
2016/05/06 面试题
专业销售业务员求职信
2013/11/18 职场文书
高一历史教学反思
2014/01/13 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python