带预览图的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>

带预览图的js切换效果！相关推荐

Layui 上传图片限制数量超出数量中断上传带预览图带删除按钮
Layui 上传文件限制数量在网上看了好多相关的文章,各种不好使,反正就是限制不了.各种调用,都没办法较少代码的解决这个问题.下边分享我的办法. 功能图例: 多图上传----选中四张(程序限制上传三 ...
v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
图片预览（原生js实现）
功能描述很多网站都是使用浏览器自带图片浏览功能,但看起来很low,想手动实现图片预览功能,点击图片弹出大图预览框在屏幕中间显示,根据图片宽高自适应屏幕大小效果图具体代码实现页面preview. ...
Vant上传多个图片或视频，更改视频预览图
需求 vant上传多个视频或图片图片和视频都有预览图最终成果过程最开始是准备通过自定义预览样式,通过 preview-cover 插槽可以自定义覆盖在预览区域上方的内容.但问题是会修改每一个上 ...
Unity编辑器扩展-生成prefab的预览图并保存为图片
Project视图里的prefab文件都是一个蓝色的正方体,我想给它们加个预览图,暂时不知道怎么改Project视图的,但反正我想像NGUI那样有个专门的窗口存放一些常用的prefab,所以做成了如下 ...
PDF在线预览插件touchPDF.js：手机端预览
接上一篇web端预览,博主找了一篇关于手机端的预览插件,丑是丑了点,但是能用,下面就来介绍一下吧! PDF在线预览插件:手机端预览 1.编辑界面的HTML代码 2.第二步就没了 3.既然这样那我们直接 ...
微信小程序-图片预览图
有时候图片列表图片过小看不清图片内容,这时我们一般就希望点击图片可以放大显示进行预览,那么,接下来我们就调用微信原生API的的浏览图片程序进行对图片预览的实现. 单张图片预览通过微信原生API实现单 ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
安卓桌面精灵_小米MIUI安卓Q来啦，超多黑科技！凭啥红米先尝鲜？内附预览图...
横看纵观,华为EMUI10已经公布,魅族Flyme8内测进行时,苹果iOS13已是板上钉钉,而我们广大米粉的MIUI11还没有着落--怎一个寻寻觅觅,冷冷清清,凄凄惨惨戚戚!不过还好,咱们还有安卓Q版 ...

带预览图的js切换效果！

带预览图的js切换效果！相关推荐

最新文章

热门文章