左右可控的JS圖片幻燈_圖片特效特效

從老外那里整理出來的，優化了部分JavaScript代碼，圖片地址及文字描述都寫在JS的數組里，因此適合一些不經常更新的頁面，因為將地址及信息寫進數組，對動態更新造成一定麻煩，用到的可關注一下。

<html>
<head>
<title>左右可控的圖片幻燈</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]  = '/jscss/demoimg/wall1.jpg';
Picture[2]  = '/jscss/demoimg/wall2.jpg';
Picture[3]  = '/jscss/demoimg/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://p1.mb5u.com/texiao/20110225160453209.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>

所屬頻道：圖片特效特效/更新時間：2012-12-07

[收藏][報錯][返回列表]

相關圖片特效特效：

左右可控的JS圖片幻燈_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些