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

代码简介：

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

代码内容：

View Code

< html >
< head >
< title > JavaScript控制图片左右播放的幻灯片代码 - www.webdm.cn </ title >
< style >  
.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 ;   }
 
</ style >
< script >  
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  <  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  >  (pss)) jss = 1 ;
if  (jss  <   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();
}}
 
</ script >
 
</ head >  
< body  onload ='showHot=true;self.focus();'  bgcolor =#000000  link ="#FF0000"  vlink ="#FF0000"  alink ="#FF0000" >
< div  align ="center" >
   < center >
< table  border =0  cellpadding =10  cellspacing =0 >
   < tr >

     < td  width =350  height =280  colspan ="3" >
     < img  src =http://www.webdm.cn/images/wall7.jpg  name =PictureBox  width =350  height =280 >
     </ td >
   </ tr >
   < tr >
     < td  id =CaptionBox  class =Caption  align =center  colspan ="3" > 这是最开始时候的默认第一张。 </ td >
   </ tr >
   < tr >
     < td  align ="center" >
     < a  class =Controls  href ="#"  onClick ="javascript:control('B');" ><  <</a >
     </ td >
     < td  align ="center" >
     < a  class =Controls  href ="#"  onClick ="javascript:control('H');" > | | | </ a >
     </ td >
     < td  align ="center" >
     < a  class =Controls  href ="#"  onClick ="javascript:control('F');" >< b > > > </ b ></ a >
     </ td >
   </ tr >   
</ table >
   </ center >
</ div >
</ body >
</ html >
< br  />
< p >< a  href ="http://www.webdm.cn" > 网页代码站 </ a >  - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >
代码来自：http://www.webdm.cn/webcode/a2e16ec9-2b6e-45c1-81b4-f18e974f283f.html

 

转载于:https://www.cnblogs.com/webdm/archive/2011/09/08/2171161.html