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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
php+javascript的日历控件
2009/11/19 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
Node.js学习入门
2017/01/03 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Python-OpenCV基本操作方法详解
2018/04/02 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
基于python监控程序是否关闭
2020/01/14 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
优秀公益广告词大全
2014/03/19 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
立春观后感
2015/06/18 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
MySQL transaction事务安全示例讲解
2022/06/21 MySQL