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>

android实战项目六imageview做一个幻灯片效果

imageview做一个幻灯片效果这是从本地获取图片的方法,在Android4.0之后,增加了一些新特性,也增加了一些限制。其中有一个限制就是不能在主线程中访问网络,必须另开一条线程访问。但是这里又存...
  • tangsilian
  • tangsilian
  • 2016年04月14日 10:39
  • 1927

用Beamer制作幻灯片(卷三 动画篇)

在前面的两个章节中主要讲解的是怎么制作幻灯片的大体框架,要使得幻灯片更吸引眼球我们就还需要为其添加一些动画。 1.覆盖 覆盖是最为基本的一种幻灯片效果。严格地说,它甚至不是”动态“效果,而只是把同一帧...
  • Grace_0642
  • Grace_0642
  • 2014年02月14日 13:26
  • 10005

Camera.js——百叶窗幻灯片(超炫)

.效果一 今天偶然发现一个jquery轮播广告插件很不错,效果很炫,堪比Flash轮播广告效果,赶紧上来分享给大家。 这个幻灯片每次切换都是随机调用他设置的特效,所以各种混合切换的效...
  • cddcj
  • cddcj
  • 2016年08月24日 16:51
  • 2281

javascript图片幻灯片效果显示

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

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

JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...
  • wangwenjie1314
  • wangwenjie1314
  • 2012年07月12日 15:56
  • 1788

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

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

asp.net动态显示首页图片切换幻灯片效果

  • 2008年12月01日 16:54
  • 78KB
  • 下载

原生JavaScript实现幻灯片效果

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

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

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

[JavaScript学习]幻灯片效果

近期在学习JavaScript,这算是一个基础效果实现的小联系吧,把想法和实现方法记录在这里,作为学习笔记吧。 目标:实现图片渐隐渐显切换的幻灯片效果。 想法: 图片切换通过改变图片url来实现...
  • u011832520
  • u011832520
  • 2013年11月28日 11:19
  • 621
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript图片幻灯片显示效果
举报原因:
原因补充:

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