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 相关文章推荐
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
js实现网页版贪吃蛇游戏
Feb 22 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php数组和链表的区别总结
2019/09/20 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
审核会计岗位职责
2013/11/08 职场文书
大课间体育活动方案
2014/03/12 职场文书
房屋认购协议书
2015/01/29 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
机械生产实习心得体会
2016/01/22 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
详解pytorch创建tensor函数
2022/03/22 Python