效果其实有两个 需要下面那个..
但是不需要效果最下面的三个缩略图啊..
麻烦前辈帮帮我改成简洁稳定的代码 拜谢!!!
代码:
=========================================
<style type="text/css">
.container{
width:280px;
height:200px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:282px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:65px;
height:50px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}#idNum{ position:absolute; right:5px; bottom:5px;}
#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>
<script type="text/javascript">
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.src = "javascript:void(0);";//第一次变换时不显示红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;
//修正Index
if(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.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);
}
};
</script><div id="idShow" class="container">
</div><div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div><script>
var r = new RevealTrans("idShow");//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');r.Start();//////////////////////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 = "on";
//文本区域
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>
但是不需要效果最下面的三个缩略图啊..
麻烦前辈帮帮我改成简洁稳定的代码 拜谢!!!
代码:
=========================================
<style type="text/css">
.container{
width:280px;
height:200px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:282px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:65px;
height:50px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}#idNum{ position:absolute; right:5px; bottom:5px;}
#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>
<script type="text/javascript">
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.src = "javascript:void(0);";//第一次变换时不显示红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;
//修正Index
if(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.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);
}
};
</script><div id="idShow" class="container">
</div><div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div><script>
var r = new RevealTrans("idShow");//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');r.Start();//////////////////////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 = "on";
//文本区域
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>
解决方案 »
- 求教如何动态加载脚本到HTML?吐槽javascript这语言真弱智
- 弹出层关闭或隐藏问题
- JAVA检查并储存信息碰到问题
- 窗口右下角广告窗口的问题,在firefox中为什么老是闪烁呀
- 请帮忙看看这个脚本,在firefox里面是错误的,
- javascript 解析 WebService 返回的 XML
- 随机变化图片的效果出不来,提示没有注册类别??
- 请解释一下这个函数
- 请问高手如何取网页内容?
- jquery.validate.js的使用
- 能否用 split() 代码来判断"内容"是否存在...大家帮忙看看...
- JavaScript中很多时候局部变量和全局变量总弄错,一不小心就报未定义和缺少对象的错误!请大虾们解释一下JavaScript中定义局部变量和全局变量的概念和例子!
你下载来看吧
应该有你想要的
我确实做过自己改的试验...
可是对于JS一窍不通的我来说
这代码的循环好象和idPicList有很大的关系..
一把idPicList去掉就不好用了啊
其实我很不好意思....
问您要到代码还需要您来更改...
但是我对于JS啥也不懂但是工作又用到了 很无奈..
不但要单纯的去掉
<div id="idShow" class="container"> </div>
var r = new RevealTrans("idShow");
的相关部分,
还要更改idPicList.....
您说的动动手才能学到东西我理解...
但是...这太难了啊 对于没基础的我来说..您代码的高度不是朝夕之间就能明了的...
希望您能在百忙之中帮我改改..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{padding:0px;margin:0px;}
ul{list-style:none;}
img{border:0px;}
body{
text-align:center;
font-size:12px;
color:#4c4c4c;
background:#FFFFFF;
margin-bottom:10px;
}
.newimgbox{
width:280px;height:240px;
position:relative;
margin:0px auto;
}
.newimg{
width:280px;height:240px;
position:absolute;left:0px;top:0px;
z-index:1;
background:#000000;
}
.newimg img{
width:270px;height:230px;
display:block;
margin:5px;
background:#FFFFFF;
filter:revealTrans(duration=1,transition=23);
}
.newimg_list_bg{
width:270px;height:60px;
position:absolute;left:5px;top:180px;
background:#000000;
z-index:10;
filter:Alpha(Opacity=50);
opacity:0.5;
}
.newimg_alt{
width:260px;height:30px;
position:absolute;left:10px;top:180px;
text-align:left;
font-size:16px;
font-weight:bolder;
line-height:30px;
color:#FFFFFF;
z-index:100;
}
.newimg_list{
width:100px;height:22px;
position:absolute;right:0px;top:208px;
overflow:hidden;
z-index:1000;
}
.selected{
width:22px;height:22px;
display:block;
float:left;
background:#000;
line-height:22px;
font-size:14px;
color:#FFFFFF;
}
.unselected{
width:20px;height:20px;
display:block;
float:left;
background:#FFFFFF;
margin-top:1px;
line-height:20px;
font-size:12px;
color:#000000;
}
</style>
<script language="javascript">
<!--
var ScrollPic=function(ParentID,BigPicID,TitleID,AltID)
{
this.Data=[];
this.ImgLoad=[];
this.TimeOut=2000;
var adNum=0,TimeOutObj;
if(!ScrollPic.childs)
{ScrollPic.childs=[]};
this.ID=ScrollPic.childs.push(this)-1;
this.Add=function(BigPic,Url,Title)
{
var ls;
this.Data.push([BigPic,Url,Title]);
ls=this.ImgLoad.length;
this.ImgLoad.push(new Image);
this.ImgLoad[ls].src=BigPic
}; this.CreateElement=function(ElementTag,ElementParent,ElementId)
{
var MyObj=this.$(ElementId)
if(!MyObj)
{
var ParentObj=this.$(ElementParent)
var CreateObj=document.createElement(ElementTag)
CreateObj.id=ElementId;
CreateObj.setAttribute("id",ElementId)
ParentObj.appendChild(CreateObj)
MyObj=this.$(ElementId)
MyObj.className=ElementId
}
} this.TimeOutBegin=function()
{
clearInterval(TimeOutObj);
TimeOutObj=setInterval("ScrollPic.childs["+(this.ID)+"].next()",this.TimeOut)
};
this.TimeOutEnd=function()
{
clearInterval(TimeOutObj) };
this.select=function(num)
{
if(num>this.Data.length-1)
{return};
this.TimeOutBegin();
this.adNum=num;
if(BigPicID)
{
if(this.$(BigPicID))
{
var aObj=this.$(BigPicID).getElementsByTagName("a")[0];
var aImg=this.$(BigPicID).getElementsByTagName("img")[0];
if(aImg.filters)
{
aImg.filters.revealTrans.Transition=23;
aImg.filters.revealTrans.apply();
aImg.filters.revealTrans.play()
};
aImg.src=this.Data[num][0];
aObj.href=this.Data[num][1];
aImg.alt=this.Data[num][2];
}
};
if(TitleID)
{
if(this.$(TitleID))
{
var sImg=this.$(TitleID).getElementsByTagName("span");
var i;
for(i=0;i<sImg.length;i++)
{
if(i==num)
{
sImg[i].className="selected"
}
else
{
sImg[i].className="unselected"
}
}
}
}
if(AltID)
{
if(this.$(AltID))
{
this.$(AltID).innerHTML=this.Data[num][2]
}
};
};
this.next=function()
{
var temp=this.adNum;
temp++;
if(temp>=this.Data.length)
{temp=0};
this.select(temp)
};
this.MInStopEvent=function(ObjID)
{
if(ObjID){if(this.$(ObjID))
{
if(this.$(ObjID).attachEvent)
{
this.$(ObjID).attachEvent("onmouseover",Function("ScrollPic.childs["+this.ID+"].TimeOutEnd()"));
this.$(ObjID).attachEvent("onmouseout",Function("ScrollPic.childs["+this.ID+"].TimeOutBegin()"));
}
else
{
this.$(ObjID).addEventListener("mouseover",Function("ScrollPic.childs["+this.ID+"].TimeOutEnd()"),false);
this.$(ObjID).addEventListener("mouseout",Function("ScrollPic.childs["+this.ID+"].TimeOutBegin()"),false)
}
}
}
};
this.Ready=function()
{
this.CreateElement("div",ParentID,BigPicID)
this.CreateElement("div",ParentID,TitleID)
this.CreateElement("div",ParentID,AltID)
this.CreateElement("div",ParentID,"newimg_list_bg")
this.CreateElement("a",BigPicID,"FoucsLink")
this.CreateElement("img","FoucsLink","FoucsImg")
this.$("FoucsImg").src=this.ImgLoad[0].src
}
this.begin=function()
{
this.MInStopEvent(TitleID);
this.MInStopEvent(BigPicID);
this.adNum=0;
if(TitleID)
{
if(this.$(TitleID))
{
var i,temp="";
for(i=0;i<this.Data.length;i++)
{
if(this.adNum==i)
{temp+="<span class='selected'"}
else
{temp+="<span class='unselected'"}
temp+="onmouseover=\"ScrollPic.childs["+this.ID+"].select("+i+")\" target=\"_blank\">"+(i+1)+"</span>"
};
this.$(TitleID).innerHTML=temp
}
};
if(AltID)
{
if(this.$(AltID))
{
this.$(AltID).innerHTML=this.Data[this.adNum][2]
}
};
this.TimeOutBegin()
};
this.$=function(objName)
{
if(document.getElementById)
{
return eval('document.getElementById("'+objName+'")')
}
else
{
return eval('document.all.'+objName)
}
}
}
-->
</script>
</head>
<body>
<div class="newimgbox" id="newimgbox"></div>
<script language="javascript" type="text/javascript">
<!--
var r = new ScrollPic("newimgbox","newimg","newimg_list","newimg_alt");
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg','http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html','图片变换效果');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html', '图片滑动展示效果');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html','图片切换展示效果');
r.Ready();
r.begin();
-->
</script>
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 2</title>
</head><body>
<style type="text/css">
.container{
width:280px;
height:200px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:282px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:65px;
height:50px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
} #idNum{ position:absolute; right:5px; bottom:5px;}
#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>
<script type="text/javascript">
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.src = "javascript:void(0);";//第一次变换时不显示红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;
//修正Index
if(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.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);
}
};
</script> <!--div id="idShow" class="container">
</div--> <div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"> </div>
<!--div id="idPicList"> </div--> <script>
/*
var r = new RevealTrans("idShow"); 添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html'); r.Start();
*/////////////////////// 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 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 = "on";
//文本区域
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>