带预览图的js切换效果!

效果图:

js代码:

var isIE = (document.all) ? true : false;var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}
}var Extend = function(destination, source) {for (var property in source) {destination[property] = source[property];}
}var Bind = function(object, fun) {return function() {return fun.apply(object, arguments);}
}var Each = function(list, fun){for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};//ie only
var RevealTrans = Class.create();
RevealTrans.prototype = {initialize: function(container, options) {this._img = document.createElement("img");this._a = document.createElement("a");this._timer = null;//计时器this.Index = 0;//显示索引this._onIndex = -1;//当前索引this.SetOptions(options);this.Auto = !!this.options.Auto;this.Pause = Math.abs(this.options.Pause);this.Duration = Math.abs(this.options.Duration);this.Transition = parseInt(this.options.Transition);this.List = this.options.List;this.onShow = this.options.onShow;//初始化显示区域this._img.style.visibility = "hidden";//第一次变换时不显示红x图this._img.style.width = this._img.style.height = "100%"; this._img.style.border = 0;this._img.onmouseover = Bind(this, this.Stop);this._img.onmouseout = Bind(this, this.Start);isIE && (this._img.style.filter = "revealTrans()");this._a.target = "_blank";$(container).appendChild(this._a).appendChild(this._img);},//设置默认属性SetOptions: function(options) {this.options = {//默认值Auto:		true,//是否自动切换Pause:		1000,//停顿时间(微妙)Duration:	1,//变换持续时间(秒)Transition:	23,//变换效果(23为随机)List:		[],//数据集合,如果这里不设置可以用Add方法添加onShow:		function(){}//变换时执行};Extend(this.options, options || {});},Start: function() {clearTimeout(this._timer);//如果没有数据就返回if(!this.List.length) return;//修正Indexif(this.Index < 0 || this.Index >= this.List.length){ this.Index = 0; }//如果当前索引不是显示索引就设置显示if(this._onIndex != this.Index){ this._onIndex = this.Index; this.Show(this.List[this.Index]); }//如果要自动切换if(this.Auto){this._timer = setTimeout(Bind(this, function(){ this.Index++; this.Start(); }), this.Duration * 1000 + this.Pause);}},//显示Show: function(list) {if(isIE){//设置变换参数with(this._img.filters.revealTrans){Transition = this.Transition; Duration = this.Duration; apply(); play();}}this._img.style.visibility = "";//设置图片属性this._img.src = list.img; this._img.alt = list.text;//设置链接!!list["url"] ? (this._a.href = list["url"]) : this._a.removeAttribute("href");//附加函数this.onShow();},//添加变换对象Add: function(sIimg, sText, sUrl) {this.List.push({ img: sIimg, text: sText, url: sUrl });},//停止Stop: function() {clearTimeout(this._timer);}
};

  html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>图片切换效果</title><script src="RevealTrans.js"></script>
</head>
<body><style type="text/css">.container{width: 335px;height: 262px;border: 1px solid #eee;position: absolute;}#idPicText{background: #000;line-height: 25px;text-align: center;font-weight: bold;width: 336px;white-space: nowrap;overflow: hidden;font-size: 12px;z-index: 1000;position: absolute;margin-top:238px;opacity:.7;filter:alpha(opacity=70);}#idPicText a{text-decoration: none;color: #333;display: block;}#idPicList{width: 335px;height: 72px;padding-top:263px;}#idPicList img{cursor: pointer;width: 90px;height: 70px;filter: alpha(opacity=50);-moz-opacity: .5;opacity: .5;border: 0;padding-left: 16px;}#idPicList img.on{filter: alpha(opacity=100);-moz-opacity: 1;opacity: 1;}#idNum{position: absolute;right: 5px;bottom: 5px;display: none;}#idNum li{float: left;list-style: none;color: #fff;text-align: center;line-height: 16px;width: 16px;height: 16px;font-family: Arial;font-size: 12px;cursor: pointer;margin: 1px;border: 1px solid #707070;background-color: #060a0b;}#idNum li.on{line-height: 18px;width: 18px;height: 18px;font-size: 14px;border: 0;background-color: #ce0609;font-weight: bold;}</style><div id="idPicShow" class="container"><ul id="idNum"></ul></div><div id="idPicText"></div><div id="idPicList"></div><script>var rvt = new RevealTrans("idPicShow");//添加变换对象rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];var oNum = $("idNum"), arrNum = [];//设置图片列表Each(rvt.List, function (list, i) {//图片式var img = document.createElement("img");img.src = list["img"]; img.alt = list["text"];arrImg[i] = img;oList.appendChild(img);//按钮式var li = document.createElement("li");li.innerHTML = i + 1;arrNum[i] = li;oNum.appendChild(li);//事件设置img.onmouseover = li.onmouseover = function () { rvt.Auto = false; rvt.Index = i; rvt.Start(); };img.onmouseout = li.onmouseout = function () { rvt.Auto = true; rvt.Start(); };});//设置图片列表样式 文本显示区域rvt.onShow = function () {var i = this.Index, list = this.List[i];//图片式Each(arrImg, function (o) { o.className = ""; }); arrImg[i].className = "on";//按钮式Each(arrNum, function (o) { o.className = ""; }); arrNum[i].className = "off";//文本区域oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;}//文本显示区域oText.onmouseover = function () { rvt.Auto = false; rvt.Stop(); };oText.onmouseout = function () { rvt.Auto = true; rvt.Start(); };rvt.Start();</script>
</body>
</html>

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/267298.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[BZOJ4033][HAOI2015]树上染色(树形DP)

4033: [HAOI2015]树上染色 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2437 Solved: 1034[Submit][Status][Discuss]Description 有一棵点数为N的树&#xff0c;树边有边权。给你一个在0~N之内的正整数K&#xff0c;你要在这棵树中选择K个点&#xff0c;将其染成黑色&a…

php数组添加省会城市,【JSON数据】中国各省份省会城市经纬度 JSON

[{ name: 北京, value: [ 116.3979471, 39.9081726, 78 ] },{ name: 上海, value: [ 121.4692688, 31.2381763, 75 ] },{ name: 天津, value: [ 117.2523808, 39.1038561, 95 ] },{ name: 重庆, value: [ 106.548425, 29.5549144, 78 ] },{ name: 河北, value: [ 114.4897766, …

CentOS 6.0安装JDK7

CentOS 6.0安装JDK7 - Sea Wang - 博客园CentOS 6.0安装JDK7话说在CentOS下安装JDK7&#xff08;下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html&#xff09;&#xff0c;同事直接告诉我说双击jdk-7-linux-…

Python成长之路【第七篇】:Python基础之装饰器

一、什么是装饰器 装饰&#xff1a;装饰既修饰&#xff0c;意指为其他函数添加新功能 器&#xff1a;器既函数 装饰器定义&#xff1a;本质就是函数&#xff0c;功能是为其他函数添加新功能 二、装饰器需要遵循的原则 1、不能修改装饰器的源代码&#xff08;开放封闭原则&#…

php中改变函数路由,php – 如何修改codeigniter中的路由

我终于找到了我想要的东西.以下是我的代码在routes.php中的样子./* Custom Routes. */// Store Normal Pages.$route[home/(:any)] "base/home/$1";$route[about/(:any)] "base/about/$1";$route[services/(:any)] "base/services/$1";$route…

主域控宕机无法恢复后,如何配置辅助域控继续工作

情况如下&#xff1a; 系统基础结构如下&#xff1a;一个主域控&#xff0c;一个辅助域控且都安装AD与DNS集成区。 如果&#xff1a; 主域控宕机且无法恢复&#xff0c;请问辅助域应做些什么才能替代主域控继续工作&#xff1f; 第一步&#xff1a;在辅助域控上清除主域控AD数…

$.get、$.post 和 $().load()

一、$.get() 用于get方式进行异步请求。 结构&#xff1a; $.get( url, data, callback, type)&#xff1b; url - 请求路径&#xff08;string&#xff09;; data - 发送至服务器的键值对数据 &#xff08;object&#xff09;; callback - 状态为success时的回调函数&a…

sql数据库与oracle数据库同步,[sql数据库同步]Oracle与SQL Server如何实现表数据同步...

在线QQ客服&#xff1a;1922638专业的SQL Server、MySQL数据库同步软件数据库的Oracle版本为10.2&#xff0c;并安装在Linux系统上。数据库SQL Server的版本是SQL 2005&#xff0c;已安装在Windows XP系统上。现在我们需要做的是在两个数据库表之间同步数据。现在&#xff0c;最…

零食嘴----美食领域的美丽说

零食嘴美食分享社区首页 阿里巴巴参谋长曾鸣曾说过&#xff1a;“淘宝等美丽说模式整整等了两年。不仅在女性领域&#xff0c;阿里希望在各个维度都出现‘美丽说’。” 零食嘴就是美食领域美丽说。 所谓的美丽说模式&#xff0c;是指社会化电子商务分享的模式&#xff0c;在一个…

Symfony2

--开放性 --可扩展性 --持续升级性 --有商业背景和支持性 --被广泛使用性 --引领PHP领域最佳实践性 ----官网&#xff08;查询功能使用&#xff09; 定义类 类的属性和方法统称为类成员&#xff1b;类的实例化就是通过类的定义创建一个类的对象&#xff1b; 类定义》多个类得实…

oracle导出数据dummy,oracle导出表结构1

oracle导出表结构1.exp/imp工具在cmd中输入 exp username/password连接串回车&#xff0c;在进入如下时&#xff0c;输入no&#xff0c;就ok了导出表数据(yes/no)&#xff1a;yes> no&#xff1b;补充----------------exp/imp工具&#xff1b;带参数&#xff1a;rowsy ——带…

Tree.Panel各项属性

1、Ext.tree.TreePanel主要配置项&#xff1a;root&#xff1a;树的根节点。rootVisible&#xff1a;是否显示根节点&#xff0c;默认为true。useArrows&#xff1a;是否在树中使用Vista样式箭头&#xff0c;默认为false。lines&#xff1a;是否显示树线&#xff0c;默认为true…

测试用例设计方法

测试用例设计方法 本篇由本人整理黑盒、白盒、接口测试一系列用例设计方法。 黑盒测试用例设计方法包括等价类划分法、边界值分析法、错误推测法、因果图法、判定表驱动法、正交试验设计法、功能图法、场景图法等。 &#xff08;一&#xff09;等价类划分法 定义&#xff1a;等…

oracle 在数据库打开状态下进行备份时_下面描述不正确的是,Oracle数据库DBA面试题50道及答案_经典...

Oracle数据库DBA面试题50道及答案_经典1. 解释冷备份和热备份的不同点以及各自的优点解答&#xff1a;热备份针对归档模式的数据库&#xff0c;在数据库仍旧处于工作状态时进行备份。而冷备份指在数据库关闭后&#xff0c;进行备份&#xff0c;适用于所有模式的数据库。热备份的…

Disk Quota磁盘配额

Disk Quota &#xff1a;磁盘配额 限制某个用户或某个组&#xff0c;对某个分区(生效级别是文件系统)的使用能力&#xff1b;由于早期的Unix系统是多用户、多任务的环境&#xff0c;所以一台主机的磁盘会被多个用户使用&#xff0c;某个用户占用大量的磁盘空间会影响其他用户对…

linux进度条脚本,Linux下简易进度条的实现代码

在生活中&#xff0c;进度条是很常见的&#xff0c;那么&#xff0c;进度条是如何实现的呢&#xff1f;首先&#xff0c;进度条的动态是利用人眼视觉暂留效果的。实际上是如下过程&#xff1a;先输出&#xff1a;[ ]表示进度是1%&#xff0c;刷新之后再输出&#xff1a;[ …

省选之前的未完成的计划(截至到省选)

PLAN OF THE COMING HEOI good problems:-bzoj4823:[Cqoi2017]老C的方块 【*】-bzoj3171:[Tjoi2013]循环格 【*】-bzoj4200:[Noi2015]小园丁与老司机 【*】-bzoj1061:[Noi2008]志愿者招募 【*】-bzoj3600:没有人的算术 【*】-bzoj2806:[Ctsc2012]Cheat 【*】-bzoj2219:数论之神…

动手写的Python的HTML语法分析器(面向对象)

动手写的Python的HTML语法分析器&#xff08;面向对象&#xff09; 主要包括4个文件&#xff0c;util.py文件主要负责截取每个块。 rules.py文件定义两个类&#xff0c;超类Rule和分别对应的子类&#xff0c;子类定义了不同的划分块的要求,子类包换action函数&#xff0c;调用h…

Linux中mysql的卸载和重装,在Linux下面卸载与重新安装Postgresql

在Linux下面卸载与重新安装Postgresql1. 先把原来的postgresql安装包找出来&#xff0c;如果找不到就可以直接安装了。[roottestserver postgresql]# rpm -qa|grep postpostgresql-docs-8.0.3-1.1AXpostgresql-libs-8.0.3-1.1AXfreeradius-postgresql-1.0.1-3.RHEL4.1AXpostgre…

[原]Jenkins(二十) jenkins再出发之Error: Opening Robot Framework log failed

错误缘由&#xff1a;使用plugin [public robot framework test results] 生成的HTML文件都无法正常打开.解决方案&#xff1a;Connect on your jenkins url (http://[IP]:8080/) Click on administer Jenkins Click on consol jenkins Copy this into the field and execut…