<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>多行多列的图片滚动</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Pattazl">
<meta name="Keywords" content="Scroll Iframe">
<meta name="Description" content="No stop for picture scroll">
<style>
table,td,tr{
border: none;
padding: 0px;
margin:0px;
}
</style>
</head>
<script language="JavaScript">
<!--
window.οnlοad=initPicScroll;
/***************************
函数
【使用说明】
此函数为图片滚动所做,当鼠标移动到图片上时候显示大图片,并且移动速度降低一半
图片名字需要从0开始
图片格式需要一致,且大图片需要有前缀
比如说,图片本例子的小图片名字依次为
logo_0.gif logo_1.gif logo_2.gif logo_3.gif ....
大图片名字依次为
Blogo_0.gif Blogo_1.gif Blogo_2.gif Blogo_3.gif ....
图片数目最好和行数乘以列数相等,否则不够时会显示不出图片
initPicScroll函数为最终初始化的函数,最好写在window.onload里面
【使用方法】
1.创建一个文件
里面放一个层,比如
<div id="picScroll" style="position:absolute;top:0px;left:0px"></div>
2.按照 使用说明 要求修改“预先需要定义的参数” 并且设置好图片
3.用一个iframe包含此文件,这样就可以作连续滚动了
比如<iframe src="picScrollTest.htm" align=default frameBorder=0 height=134 name=MyFrame scrolling=no width=320></iframe>
注意iframe的宽度要小于图片列的宽度
【其他】
函数比较简单实用,为临时应一个网友要求所写,此类代码网上也很多了,自己写个更加通用的,也算练习
本来是准备组织成一个js的类的,但是刚才试了一下比较麻烦,算了,就先这么用吧。
作者: Pattazl
时间: 2005-6-5
版权没有:-)
****************************/
// ****开始预先需要定义的参数****************
var picScrollName="picScroll"; // 需要滚动的层的ID名称
var picPath="Pics/"; // 图片路径,无路径就留空
var picPre="logo_"; // 小图片名称
var picSuf=".gif"; // 小图片格式
var picBigPre="B"; // 大图片前缀
var scrollSpeed=3; // 滚动速度 正数为向左移动
var overSpeed=1; // 当鼠标移动图片上时,滚动速度 正数为向左移动
var picRow=2; // 图片行数
var picCol=5; // 图片列数
// ***需要定义的参数 结束********************
// *******函数正式开始*********************
var picArray=new Array()
var picArrayBig=new Array()
var picNum=picCol*picRow;
var tempSpeed=scrollSpeed;
function movePicScroll() // 默认为向左移动
{
if(tempSpeed==null)tempSpeed=6;
var picScrollObj=document.getElementById(picScrollName);
var PicScrollWidth=parseInt(picScrollObj.offsetWidth);
if (tempSpeed>0&&((parseInt(picScrollObj.style.left)-tempSpeed)<(-PicScrollWidth/2)))
{
picScrollObj.style.left=-tempSpeed;
}
else if(tempSpeed<0&&((parseInt(picScrollObj.style.left)-tempSpeed)>0))
{
picScrollObj.style.left=-PicScrollWidth/2-tempSpeed;
}
else
{
picScrollObj.style.left=parseInt(picScrollObj.style.left)-tempSpeed;
}
window.setTimeout("movePicScroll()",50)
}
function hidenPic(obj)
{
obj.style.display="none";
tempSpeed=scrollSpeed;
}
function showPic(j)
{
tempSpeed=scrollSpeed; // 原来速度
for (var i=0; i<picNum*2; i++)
{
if(i==j)
{
tempSpeed=overSpeed; // 速度降低
document.getElementById("picScrollImg"+i).style.display='block';
var BigDiv=document.getElementById("picScrollDiv"+i);
var Contant=document.getElementById(picScrollName);
if((BigDiv.offsetTop+BigDiv.offsetHeight)>(Contant.offsetTop+Contant.offsetHeight))
{
BigDiv.style.top=(Contant.offsetTop+Contant.offsetHeight-BigDiv.offsetHeight);
}
}
else
document.getElementById("picScrollImg"+i).style.display='none';
}
}
function initPicScroll()
{
var tempDivScroll=document.getElementById(picScrollName);
if(tempDivScroll==null)
{
alert("请添加一个DIV且设置变量picScrollName和该DIV的ID一致")
return false;
}else
{
tempDivScroll.style.position="absolute";
tempDivScroll.style.top="0px";
tempDivScroll.style.left="0px";
}
for(var i=0;i<picNum;i++)
{
picArray[i]=new Image();
picArrayBig[i]=new Image();
picArray[i].src=picPath+picPre+i+picSuf;
picArrayBig[i].src=picPath+picBigPre+picPre+i+picSuf;
}
tableStr="<table id=\"picScrollTable\"><tr>";
var tabletemp="";
var tabletemp1="";
var tabletemp2="";
var imgy=0; //大图片的相对位置y
var imgx=0; //大图片的相对位置x
for(var i=0;i<picNum;i++)
{
tabletemp1+="<td><div id='picScrollDiv"+i+"' style='position:absolute;y:"+imgy+"px;x:"+imgx+"px;'><img id='picScrollImg"+i+"' οnmοuseοut='hidenPic(this);' style='display:none;' src=\""+picArrayBig[i].src+"\" /></div><img οnmοuseοver=\"showPic("+i+")\" src=\""+picArray[i].src+"\" /></td>";
tabletemp2+="<td><div id='picScrollDiv"+(i+picNum)+"' style='position:absolute;y:"+imgy+"px;x:"+imgx+"px;'><img id='picScrollImg"+(i+picNum)+"' οnmοuseοut='hidenPic(this);' style='display:none;' src=\""+picArrayBig[i].src+"\" /></div><img οnmοuseοver=\"showPic("+(i+picNum)+")\" src=\""+picArray[i].src+"\" /></td>";
if(i%picCol==(picCol-1)&&i!=(picNum-1))
{
tabletemp+=tabletemp1+tabletemp2+"</tr><tr>";
tabletemp1="";
tabletemp2="";
}else if(i==(picNum-1)) // 最后一行
{
tabletemp+=tabletemp1+tabletemp2;
}
}
tableStr+=tabletemp+"</tr></table>";
tempDivScroll.innerHTML=tableStr;
//table生成,然后需要移动此table
movePicScroll();
}
// ****函数结束************
//-->
</script>
<body>
<div id="picScroll" style="position:absolute;top:0px;left:0px"></div>
</body>
</html>
假设以上内容存为picScrollTest.htm 使用时<body οnmοuseοut="frames['MyFrame'].showPic(-1);">
<iframe src="picScrollTest.htm" align=default frameBorder=0 height=204 name="MyFrame" scrolling=no width=400></iframe>
</body>