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

最新推荐文章于 2021-06-04 17:09:21 发布

转载最新推荐文章于 2021-06-04 17:09:21 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webdm/archive/2011/09/08/2171161.html

文章标签：

#javascript #ViewUI

本文提供了一段使用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