JS图片翻动展示代码，在网上淘来的，想要改写一下来用。对JS是连皮毛也不懂，自己在网上搜资料看的头大，贴出来求教高人
想改写的目标效果：
页面A.HTML中使用两个iframe，iframe1中src=1.HTML，内容和实现的功能就是下边标注的“小图显示部分”，iframe2中src=2.HTML，内容和实现的功能就是下边标注的“大图显示部分”，即经过改写后使用iframe，1.HTML的参数可以正确的传递到2.HTML并正确的执行。
另：所谓的“大图显示部分”似乎较为简单，能否实现其src的值在1.HTML中定义，从1.HTML中获取？
请各位高人赐教，最好是做上浅显的注释，以便学习。
========================页面主要内容===========================
<style type="text/css">
<!--
.clssMainRoll {
FILTER: progid:DXImageTransform.Microsoft.Slide(slidestyle=SWAP,Bands=1); CURSOR: pointer
}
-->
</style>
<script language="JavaScript" type="text/javascript" src="imagerollover.js"></script>
<!--JS代码部分1-->
<SCRIPT language=javascript>
var m_nPageInitTime = new Date();
var MainTopRoll = new xwzRollingImageTrans("IMG_MAIN_TOP_ROLL_DETAIL", "IMGS_MAIN_TOP_ROLL_THUMBNAIL");
MainTopRoll.addItem("http://www.baidu.com/","images/shower_01.jpg");
MainTopRoll.addItem("http://www.sina.com/","images/shower_02.jpg");
MainTopRoll.addItem("http://www.qq.com/","images/shower_03.jpg");
MainTopRoll.addItem("http://www.126.com/","images/shower_04.jpg");
</SCRIPT>
<!--大图显示部分-->
<TABLE cellSpacing=0 cellPadding=0 width=575 align=center>
<TBODY>
<TR>
<TD id="IDS_DIV_MAIN_TOP_ROLL_DETAIL" width=500 height=235>
<IMG class=clssMainRoll height=235 src="images/shower_01.jpg" width=500 border=0 name="IMG_MAIN_TOP_ROLL_DETAIL">
</TD>
</TR>
</TBODY>
</TABLE>
<!--小图显示部分-->
<TABLE cellSpacing=0 cellPadding=0 align=center>
<TBODY>
<TR>
<TD align=right height=60>
<IMG style="DISPLAY: none" height=5 src="" width=9 align=absMiddle border=0 name="IMGS_MAIN_TOP_ROLL_THUMBNAIL">
<IMG style="CURSOR: pointer" onclick="MainTopRoll.alterImage(0)" src="images/mini_01.jpg" border=0>
</TD>
</TR>
<TR>
<TD align=right height=60>
<IMG style="DISPLAY: none" height=5 src="" width=9 align=absMiddle border=0 name="IMGS_MAIN_TOP_ROLL_THUMBNAIL">
<IMG style="CURSOR: pointer" onclick="MainTopRoll.alterImage(1)" src="images/mini_02.jpg" border=0>
</TD>
</TR>
<TR>
<TD align=right height=60>
<IMG style="DISPLAY: none" height=5 src="" width=9 align=absMiddle border=0 name="IMGS_MAIN_TOP_ROLL_THUMBNAIL">
<IMG style="CURSOR: pointer" onclick="MainTopRoll.alterImage(2)" src="images/mini_03.jpg" border=0>
</TD>
</TR>
<TR>
<TD align=right height=60>
<IMG style="DISPLAY: none" height=5 src="" width=9 align=absMiddle border=0 name="IMGS_MAIN_TOP_ROLL_THUMBNAIL">
<IMG style="CURSOR: pointer" onclick="MainTopRoll.alterImage(3)" src="images/mini_04.jpg" border=0>
</TD>
</TR>
</TBODY>
</TABLE>
<!--JS代码部分2-->
<SCRIPT language=JavaScript>
MainTopRoll.Index = parseInt('0');
MainTopRoll.install();
</SCRIPT>
==========================页面内容结束===========================
下边是JS文件代码
==========================JS代码内容===========================
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a
)&&x.oSrc;i++){
x.src=x.oSrc;
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function swapLayer(sById1, sById2){
var div1 = document.getElementById(sById1);
var div2 = document.getElementById(sById2);
if(div1 == null || div2 == null) return;
if(div1.style.display == 'none'){
div1.style.display = "block";
div2.style.display = "none";
}else{
div1.style.display = "none";
div2.style.display = "block";
}
}
/* ================================================
<img onMouseOver=xwzImgRollOver(this, true, '/path/src/sample.gif') onMouseOut=xwzImgRollOver(this)
================================================ */
function xwzImgRollOver(oImg, bType, sSrc){
if(bType == true){
if( oImg.getAttribute('xwzAlreadySrc') == null) oImg.setAttribute('xwzAlreadySrc', oImg.src);
oImg.src = sSrc;
}else{
if( oImg.getAttribute('xwzAlreadySrc') != null) oImg.src = oImg.getAttribute('xwzAlreadySrc');
}
}
function xwzRollingImageTrans(imageName, thumbnailName, eventName, winName){
this.Index = 0;
this.ListItem = new Array(0);
this.Name = imageName;
this.Thumbnail = thumbnailName;
this.tmRotate = null;
this.nInterval = 4500;
this.eventName = eventName;
this.winTarget = winName;
if(window.xwzRollObject == null) window.xwzRollObject = new Array(0);
window.xwzRollObject[this.Name] = this;
this.install = function(){
window.document.images[this.Name].onclick=this.goLink;
if(this.ListItem.length == 0) return;
this.tmRotate = setTimeout("window.xwzRollObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
var icons = document.getElementsByName(this.Thumbnail);
for(var i = 0; i < icons.length; i++){
if(this.eventName == 'over') icons.onmouseover=new Function("window.xwzRollObject['"+this.Name+"'].alterImage(" + i + ")");
else icons.onclick=new Function("window.xwzRollObject['"+this.Name+"'].alterImage(" + i + ")");
}
}
this.addItem = function(Link, ImgSrc, Icon1, Icon2 ){
var itmX = {Link : "", ImgSrc : "", DefIcon : "", OvrIcon : ""};
itmX.Link = Link;
itmX.ImgSrc = ImgSrc;
itmX.DefIcon = Icon1;
itmX.OvrIcon = Icon2;
this.ListItem[this.ListItem.length] = itmX;
}
this.alterImage = function(index){
var icons = document.getElementsByName(this.Thumbnail);
if(this.Index == index) return;
if(this.ListItem[this.Index].DefIcon !="") icons[this.Index].src = this.ListItem[this.Index].DefIcon;
this.Index = index;
this.imgTrans();
clearTimeout(this.tmRotate);
this.tmRotate = null;
this.tmRotate = setTimeout("window.xwzRollObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
}
this.goLink = function(){
var name = this.getAttribute('name');
var xwzRoll = window.xwzRollObject[name];
clearTimeout(xwzRoll.tmRotate);
xwzRoll.tmRotate = null;
xwzRoll.winTarget="_blank"; //定义是否弹出新页面
if(xwzRoll.winTarget == '' || xwzRoll.winTarget == null){
window.location.href=xwzRoll.ListItem[xwzRoll.Index].Link;
}else{
window.open(xwzRoll.ListItem[xwzRoll.Index].Link, xwzRoll.winTarget);
}
}
this.rotateTrans = function(){
var icons = document.getElementsByName(this.Thumbnail);
var itmX = this.ListItem[this.Index];
if(itmX.DefIcon !="") icons[this.Index].src = itmX.DefIcon;
this.Index +=1;
if(this.Index >= this.ListItem.length) this.Index = 0;
this.imgTrans();
clearTimeout(this.tmRotate);
this.tmRotate = null;
this.tmRotate = setTimeout("window.xwzRollObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
}
this.imgTrans = function(){
var icons = document.getElementsByName(this.Thumbnail);
var itmX = this.ListItem[this.Index];
if(itmX.OvrIcon !=null && itmX.OvrIcon !="") icons[this.Index].src = itmX.OvrIcon;
try{
document.images[this.Name].filters[0].apply();
document.images[this.Name].src = itmX.ImgSrc;
document.images[this.Name].filters[0].play();
}catch(e){
document.images[this.Name].src = itmX.ImgSrc;
}
}
}
function xwzRollingMarqTrans(Name, eventName){
this.Name = Name;
this.Index = 0;
this.ListItem = new Array(0);
this.tmRotate = null;
this.nInterval = 4500;
this.eventName = eventName;
if(window.xwzMarqObject == null) window.xwzMarqObject = new Array(0);
window.xwzMarqObject[this.Name] = this;
this.install = function(){
if(this.ListItem.length == 0) return;
this.tmRotate = setTimeout("window.xwzMarqObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
for(var i = 0; i < this.ListItem.length; i++){
if(this.eventName == 'over') this.ListItem.Img.onmouseover=new Function("window.xwzMarqObject['"+this.Name+"'].alterTrans(" + i + ")");
else this.ListItem.Img.onclick=new Function("window.xwzMarqObject['"+this.Name+"'].alterTrans(" + i + ")");
}
}
this.addItem = function(targetObj, targetImg, Icon1, Icon2 ){
var itmX = {Objects : null, Imgs : null, DefaultSrc : "",OverSrc : ""};
itmX.Object = targetObj;
itmX.Img = targetImg;
itmX.DefaultSrc = Icon1;
itmX.OverSrc = Icon2;
this.ListItem[this.ListItem.length] = itmX;
}
this.alterTrans = function(index){
if(this.Index == index) return;
var itmX = this.ListItem[this.Index];
if(itmX.DefaultSrc !="") itmX.Img.src = itmX.DefaultSrc;
this.Index = index;
this.objTrans();
clearTimeout(this.tmRotate);
this.tmRotate = null;
this.tmRotate = setTimeout("window.xwzMarqObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
}
this.rotateTrans = function(){
var itmX = this.ListItem[this.Index];
if(itmX.DefaultSrc !="") itmX.Img.src = itmX.DefaultSrc;
this.Index +=1;
if(this.Index >= this.ListItem.length) this.Index = 0;
this.objTrans();
clearTimeout(this.tmRotate);
this.tmRotate = null;
this.tmRotate = setTimeout("window.xwzMarqObject['" + this.Name + "'].rotateTrans()" , this.nInterval);
}
this.objTrans = function(){
var itmX = this.ListItem[this.Index];
if(itmX.Img !=null && itmX.OverSrc !="") itmX.Img.src = itmX.OverSrc;
for(var i =0; i < this.ListItem.length; i++) this.ListItem.Object.style.display = 'none';
try{
itmX.Object.filters[0].apply();
itmX.Object.style.display='';
itmX.Object.filters[0].play();
}catch(e){
itmX.Object.style.display='';
}
}
}
function verticalWheel(id, height, nSec ){
if(window.xwzWheelMarq == null) window.xwzWheelMarq = new Array(0);
xwzWheelMarq[id] = {
install : function(id, height, nSec){
this.id = id;
this.div = document.getElementById('ID_DIV_KEYWORD');
this.table = document.getElementById('ID_TABLE_KEYWORD');
if(this.div == null) return;
//this.div.style.cssText = "height:"+height+";position:relative;cursor:pointer;";
this.div.style.cssText = "height:"+height+";overflow:hidden;position:relative;cursor:pointer;clip:rect(0 auto "+this.height+" 0);left:0;top:0";
this.div.parentNode.style.position='relative'
this.div.parentNode.onmouseover=function(){xwzWheelMarq[id].table.style.visibility ='visible'; xwzWheelMarq[id].nPause=true;}
this.div.parentNode.onmouseout= function(){xwzWheelMarq[id].table.style.visibility ='hidden';xwzWheelMarq[id].nPause=false;}
this.index =0;
this.height = height;
this.items = new Array(0);
this.tmID = null;
this.nPause = false;
this.nSec = nSec;
var rows =this.table.tBodies[0].rows;
for(var i = 0; i < rows.length; i++){
this.items = document.createElement("DIV");
this.items.innerHTML=rows.innerHTML;
this.items.style.padding="3";
this.items.style.width="100%";
this.items.style.height=this.height ;
this.items.style.position="absolute";
this.items.style.top = this.height*i;
this.div.appendChild(this.items);
rows.cells[0].style.cssText="padding-left:5px;border-bottom:#CACACA 1px dotted;";
rows.onmouseover=function(){this.style.backgroundColor="#FDF1F0";}
rows.onmouseout=function(){this.style.backgroundColor="";}
if(i >= rows.length -1){rows.cells[0].style.border="";}
}
},
doWheel : function(){
var itmN = this.items[this.index];
var nSleep= 50;
var nIndex= this.index+1 >= this.items.length ? 0 : this.index+1;
clearTimeout(this.tmID); this.tmID = null;
if(this.nPause != true){
for(var i = 0; i < this.items.length; i++){
this.items.style.top = parseInt(this.items.style.top)-1;
}
if(parseInt(itmN.style.top) <= this.height*-1){
itmN.style.top = this.height*(this.items.length-1);
this.index = this.index+1 >= this.items.length ? 0 : this.index+1;
nSleep= this.nSec;
}
}else{
if(parseInt(itmN.style.top) < (this.height/2)*-1){
itmN.style.top = this.height*(this.items.length-1);
this.index = this.index+1 >= this.items.length ? 0 : this.index+1;
}
for(var i = 0; i < this.items.length; i++){
this.items.style.top = this.height * ( (this.items.length - this.index + i ) % this.items.length );
}
nSleep = 10;
}
this.tmID = setTimeout("xwzWheelMarq['" + this.id + "'].doWheel()", nSleep);
}
}
xwzWheelMarq[id].install(id, height, nSec);
xwzWheelMarq[id].tmID = setTimeout("xwzWheelMarq['" +id + "'].doWheel()", nSec);
}
==========================JS代码内容结束=========================
