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实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
react中Suspense的使用详解
Sep 01 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
js实现双色球效果
Aug 02 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查看SSL证书信息的方法
2016/09/22 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
javascript关于继承解析
2016/05/10 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python 支持向量机分类器的实现
2020/01/15 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
override和overload的区别
2016/03/09 面试题
体育节口号
2014/06/19 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
万能检讨书2000字
2014/10/17 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
廉政承诺书2015
2015/04/28 职场文书
交通事故代理词范文
2015/05/23 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python