JavaScript控制图片左右播放的幻灯片代码

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 340 次

代码简介：从老外那里整理出来的，优化了部分JavaScript代码，图片地址及文字描述都写在JS的数组里，因此适合一些不经常更新的页面，因为将地址及信息写进数组，对动态更新造成一定麻烦，用到的可关注

代码简介：

从老外那里整理出来的，优化了部分JavaScript代码，图片地址及文字描述都写在JS的数组里，因此适合一些不经常更新的页面，因为将地址及信息写进数组，对动态更新造成一定麻烦，用到的可关注一下。

代码内容：

View Code

&lt;html&gt;  &lt;head&gt;  &lt;title&gt;JavaScript控制图片左右播放的幻灯片代码 - www.webdm.cn&lt;/title&gt;  &lt;style&gt;   .Caption {  font-family: Arial;  font-weight: normal;  font-size:  12pt;  color:      #FF3300; }     A.Controls:link    { color:#666666;                       text-decoration:none;                       font-family: Arial;                       font-size:   14pt;                       font-weight: bold; }  A.Controls:visited { color:#666666; text-decoration:none;                        font-family: Arial;                       font-size:   14pt;                       font-weight: bold; }  A.Controls:active  { color:#666666; text-decoration:none;                       font-family: Arial;                       font-size:   14pt;                       font-weight: bold; }  A.Controls:hover   { color:#00FF00; text-decoration:none;                       font-family: Arial;                       font-size:   14pt;                       font-weight: bold; }     &lt;/style&gt;  &lt;script&gt;   var SlideShowSpeed = 3000;  var CrossFadeDuration = 2;     var Picture = new Array();   var Caption = new Array();  var showHot = false;  Picture[1]  = 'http://www.webdm.cn/images/wall1.jpg';  Picture[2]  = 'http://www.webdm.cn/images/wall2.jpg';  Picture[3]  = 'http://www.webdm.cn/images/wall3.jpg';    Caption[1]  = "迷人的草原.";  Caption[2]  = "好美的景色哦.";  Caption[3]  = "我爱大自然.";    var tss;  var iss;  var jss = 0;  var pss = Picture.length-1;     var preLoad = new Array();  for (iss = 1; iss &lt; pss+1; iss++){  preLoad[iss] = new Image();  preLoad[iss].src = Picture[iss];}     function control(how){  if (showHot){  if (how=="H") jss = 1;  if (how=="F") jss = jss + 1;  if (how=="B") jss = jss - 1;  if (jss &gt; (pss)) jss=1;  if (jss &lt; 1) jss = pss;  if (document.all){  document.images.PictureBox.style.filter="blendTrans(duration=2)";  document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";  document.images.PictureBox.filters.blendTrans.Apply();}  document.images.PictureBox.src = preLoad[jss].src;  if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];  if (document.all) document.images.PictureBox.filters.blendTrans.Play();  }}     &lt;/script&gt;     &lt;/head&gt;   &lt;body onload='showHot=true;self.focus();' bgcolor=#000000 link="#FF0000" vlink="#FF0000" alink="#FF0000"&gt;  &lt;div align="center"&gt;    &lt;center&gt;  &lt;table border=0 cellpadding=10 cellspacing=0&gt;    &lt;tr&gt;        &lt;td width=350 height=280 colspan="3"&gt;      &lt;img src=http://www.webdm.cn/images/wall7.jpg name=PictureBox width=350 height=280&gt;      &lt;/td&gt;    &lt;/tr&gt;    &lt;tr&gt;      &lt;td id=CaptionBox class=Caption align=center colspan="3"&gt;这是最开始时候的默认第一张。&lt;/td&gt;    &lt;/tr&gt;    &lt;tr&gt;      &lt;td align="center"&gt;      &lt;a class=Controls href="#" onClick="javascript:control('B');"&gt;&lt; &lt;&lt;/a&gt;      &lt;/td&gt;      &lt;td align="center"&gt;      &lt;a class=Controls href="#" onClick="javascript:control('H');"&gt;| | |&lt;/a&gt;      &lt;/td&gt;      &lt;td align="center"&gt;      &lt;a class=Controls href="#" onClick="javascript:control('F');"&gt;&lt;b&gt;&gt; &gt;&lt;/b&gt;&lt;/a&gt;      &lt;/td&gt;    &lt;/tr&gt;    &lt;/table&gt;    &lt;/center&gt;  &lt;/div&gt;  &lt;/body&gt;  &lt;/html&gt;  &lt;br /&gt;  &lt;p&gt;&lt;a href="http://www.webdm.cn"&gt;网页代码站&lt;/a&gt; - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&lt;/p&gt;

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。