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).οnclick=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>