js 图片轮换效果

图片效果:



注：图片标题显示在左上角。。

代码:

<div id="Frime1"></div>

<script type="text/javascript">
function picWitch()
{

var parentID="Frime1";//父框架ＩＤ
var bigpics="/UploadFiles/20106141627461528.jpg|/UploadFiles/20106141017202108.jpg|/UploadFiles/2010614101757542.jpg|/UploadFiles/2010614101615954.jpg";//大图片列表
var smallpics="/UploadFiles/20106141627461528.jpg|/UploadFiles/20106141017202108.jpg|/UploadFiles/2010614101757542.jpg|/UploadFiles/2010614101615954.jpg";//缩略图片列表
var Titles="11|||";//标题列表
var Links="|http://www.zzzhongheng.cn|http://zzjunanzz.ce.c-c.com|http://www.zzchuangxin.com";//链接列表
var frimeBgcolor="#1B5A8D";//背景颜色
var Fontcolor="#ffffff";//标题文字颜色
var FontSize=12;//标题文字大小
var FW=292;//框架宽度
var FH=223;//框架高度
var SH=50;//缩略图高度
var SW=80;//缩略图宽度
var NowPicNum=0;
var Sleep=5000;//1秒//翻动一次
var Sleep_Num=5;//鼠标点击的时候延迟的倍数
var dbSleep=Sleep;
var ChangeSleep=0;
var StartMove=false;
var bigpicarr;//大图片数组
var Titlearr;//标题数组
var smallpicarr;// 小图片数组
var movestart=false;
function loadFrime()
{

//控件背景
try
{
var bgdiv=o(parentID).appendChild(document.createElement("div"));
bgdiv.style.width=FW;
bgdiv.style.height=FH;
bgdiv.style.background=frimeBgcolor;
bgdiv.style.position="relative";
//大图片框架
var Bgpicdiv=bgdiv.appendChild(document.createElement("div"));
Bgpicdiv.id="bgpicFrime";
Bgpicdiv.style.margin=5;
Bgpicdiv.style.width=FW-10;
Bgpicdiv.style.height=FH-20-SH;
Bgpicdiv.style.overflow="hidden";
//文字信息
var TitleFirme=bgdiv.appendChild(document.createElement("div"));
TitleFirme.id="TitleDiv";
TitleFirme.style.position="absolute";
TitleFirme.style.zIndex=10;
TitleFirme.style.left=5;//文字显示位置距左
TitleFirme.style.textAlign="left";//文字显示位置距左
TitleFirme.style.top=5;//文字显示位置距左
TitleFirme.style.width=100;
TitleFirme.style.height=20;
//TitleFirme.style.background="#ff0000";
TitleFirme.style.color=Fontcolor;
TitleFirme.style.fontSize=FontSize;
//缩略图片列表框架

var SmallpicFirme=bgdiv.appendChild(document.createElement("div"));
SmallpicFirme.id="SmallpicDiv";
SmallpicFirme.style.height=SH+10;
SmallpicFirme.style.width=FW-10;
SmallpicFirme.style.overflow="hidden";
SmallpicFirme.style.bottom=0;
SmallpicFirme.style.margin="0px 5px 5px 5px";
SmallpicFirme.style.border="0px solid #ff0000";

startloadpic()
}
catch(e)
{
alert(e.message);
}

}
function startloadpic()
{
bigpicarr=bigpics.split("|");
Titlearr=Titles.split("|");
smallpicarr=smallpics.split("|");
Linksarr=Links.split("|");
var tablestr="<table border=0 cellspacing=/"0/" cellpadding=/"0/" ><tr>";
for(var i=0;i<smallpicarr.length;i++)
{
tablestr+="<td><img id=/"smallImg"+i+"/" thisnum="+i+" src=/""+smallpicarr[i]+"/" style=/"margin:0px 5px 0px 0px;filter:alpha(opacity=40);/" width="+SW+" height="+SH+" ></td>";
}
tablestr+="</tr></table>";
o("SmallpicDiv").innerHTML=tablestr;
for(var i=0;i<smallpicarr.length;i++)
{
o("smallImg"+i).onclick=function(){

scrollMoveTo(this.thisnum);
}
}
showPic(0)//默认第一个
StartMove=true;

}
function showPic(Tnum)
{
o("TitleDiv").innerHTML=Titlearr[Tnum];
o("smallImg"+Tnum).style.filter="alpha(opacity=100)";
o("bgpicFrime").innerHTML="<a href=/""+Linksarr[Tnum]+"/" target=/"_blank/"><img src=/""+bigpicarr[Tnum]+"/" width="+FW+" height="+(bgpicFrime.offsetHeight)+" border=0 ></a>";

}
var scrollCleartimeout;
function scrollMoveTo(Tnum)
{
StartMove=false;
clearTimeout(scrollCleartimeout);
dbSleep=10000;
o("smallImg"+NowPicNum).style.filter="alpha(opacity=40)";
NowPicNum=Tnum;
MoveSmallPicNext();//移动图片
dbSleep=Sleep;
showPic(NowPicNum);
scrollCleartimeout=setTimeout(changeStartMove,10000);

}

function changeStartMove()
{
StartMove=true;
}
function MoveSmallpic()
{

if(StartMove)
{

//ChangeSleep++;

//ChangeSleep=0;
o("smallImg"+NowPicNum).style.filter="alpha(opacity=40)";
if(NowPicNum==smallpicarr.length-1)
{
NowPicNum=0;
}
else
{
NowPicNum++;
}
//alert(o("smallImg"+NowPicNum).offsetLeft);
MoveSmallPicNext();//移动图片
dbSleep=Sleep;//初始化
showPic(NowPicNum);
// o("SmallpicDiv").scrollLeft=30

}
}
var smallInterval= setInterval(MoveSmallpic,dbSleep);
var smallPicScrollLeftNow=0;
var smallPIcScrollSleep=10;//移动开始步进
var smallscrollWidth=5;//移动长度
var scrollsleep=10;
function MoveSmallPicNext()
{
smallPIcScrollSleep=1;
movestart=true;
smallscrollWidth=10;
switch(NowPicNum)
{
case 0:
smallPicScrollLeftNow=0;

break;
default:
smallPicScrollLeftNow=(SW+5)*(NowPicNum-1);
break;

}
return;

}

function smallpicMove()
{
if(movestart)
{

if(o("SmallpicDiv").scrollLeft>smallPicScrollLeftNow)
{
o("SmallpicDiv").scrollLeft-=(o("SmallpicDiv").scrollLeft-smallPicScrollLeftNow)/3;
}
if(o("SmallpicDiv").scrollLeft<smallPicScrollLeftNow)
{
o("SmallpicDiv").scrollLeft+=(smallPicScrollLeftNow-o("SmallpicDiv").scrollLeft)/3;
}
if(o("SmallpicDiv").scrollLeft==smallPicScrollLeftNow) movestart=false;

}

}
setInterval(smallpicMove,smallPIcScrollSleep);

function o(tobjid)
{
return document.getElementById(tobjid);
}

loadFrime();

}

picWitch();

</script>