JavaScript图片幻灯片显示效果

原创 2006年06月01日 13:41:00
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片幻灯片显示效果</title>
<SCRIPT LANGUAGE="JavaScript">

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/1.jpg'
Pic[1] = 'images/2.jpg'
Pic[2] = 'images/3.jpg'
Pic[3] = 'images/4.jpg'
Pic[4] = 'images/5.jpg'
Pic[5] = 'images/6.jpg'
Pic[6] = 'images/7.jpg'
Pic[7] = 'images/8.jpg'
Pic[8] = 'images/9.jpg'
Pic[9] = 'images/10.jpg'
Pic[10] = 'images/11.jpg'
Pic[11] = 'images/12.jpg'
Pic[12] = 'images/13.jpg'
Pic[13] = 'images/14.jpg'
Pic[14] = 'images/15.jpg'
Pic[15] = 'images/16.jpg'
Pic[16] = 'images/17.jpg'
Pic[17] = 'images/18.jpg'
Pic[18] = 'images/19.jpg'
Pic[19] = 'images/20.jpg'
Pic[20] = 'images/21.jpg'
Pic[21] = 'images/22.jpg'
Pic[22] = 'images/23.jpg'
Pic[23] = 'images/24.jpg'
Pic[24] = 'images/25.jpg'
Pic[25] = 'images/26.jpg'
Pic[26] = 'images/27.jpg'
Pic[27] = 'images/28.jpg'
Pic[28] = 'images/29.jpg'
Pic[29] = 'images/30.jpg'
Pic[30] = 'images/31.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" onLoad="runSlideShow()">
<div id="testimage" style="position:absolute;visibility:visible;top:0px;left:0px; width:622px; height:493px;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
    <param name="movie" value="[color=Red]flash/0541.swf[/color]">
    <param name="quality" value="high"><param name="wmode" value="transparent">
    <embed src="flash/0541.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="550" height="400"></embed>
  </object>
</div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU">
<img src="images/1.jpg" name='SlideShow' width=388 height=415>
</td>
</tr>
</table>
</body>
</html>

相关文章推荐

javascript图片幻灯片效果显示

  • 2014年04月11日 19:52
  • 31KB
  • 下载

【web前端】JavaScript实现图片幻灯片滚动播放动画效果

JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...

JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden...

原生JavaScript实现幻灯片效果

当我们制作一个页面时,尤其是制作一个首页时,通常会设计一个可以链接到整个网站的其他主体页面的导航栏,或者一段网站的介绍文字中会包含这页面的跳转,通常情况会使用title属性为这些跳转链接添加一些解释性...

如何实现幻灯片效果/图片轮播

幻灯片效果/图片轮播通常用来循环显示某些元素,常使用在网站与app首页。例如本站首页所使用的图片轮播: 创建幻灯片特效 第一步:添加HTML html> head> meta ...

[JavaScript学习]幻灯片效果

近期在学习JavaScript,这算是一个基础效果实现的小联系吧,把想法和实现方法记录在这里,作为学习笔记吧。 目标:实现图片渐隐渐显切换的幻灯片效果。 想法: 图片切换通过改变图片url来实现...

10个用jQuery实现图片幻灯片/画廊效果和源码

jQuery作为一个应用最广泛的JavaScript框架之一,第三方开发者不断地为其开发出新的 jQuery 插件应用,从而使得jQuery可以帮助用户实现各种各样不同寻常的 Web 效果,作为最常使...

jquery 实现图片切换幻灯片效果

js代码 var timer = null; var offset = 5000; var index = 0; //大图交替轮换 function slideImage(i){     ...

60款很酷的 jQuery 幻灯片演示和下载--多张图片Flash切换效果

jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript图片幻灯片显示效果
举报原因:
原因补充:

(最多只允许输入30个字)