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">
    
<class=Controls href="#" onClick="javascript:control('B');">< <</a>
    
</td>
    
<td align="center">
    
<class=Controls href="#" onClick="javascript:control('H');">| | |</a>
    
</td>
    
<td align="center">
    
<class=Controls href="#" onClick="javascript:control('F');"><b>> ></b></a>
    
</td>
  
</tr>  
</table>
  
</center>
</div>
</body>
</html>
<br />
<p><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
代码来自:http://www.webdm.cn/webcode/a2e16ec9-2b6e-45c1-81b4-f18e974f283f.html

 

posted @ 2011-09-08 11:39  网页代码站  阅读(491)  评论(0编辑  收藏  举报