源程序：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="expires" content="0">
<title>JavaScript幻灯片效果</title>
<style type="text/css">
<!--
body { font-size:12px;
}
input {
border-right: #7b9ebd 1px solid;
padding-right: 2px;
border-top: #7b9ebd 1px solid;
padding-left: 2px;
font-size: 12px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
border-left: #7b9ebd 1px solid;
cursor: hand;
color: black;
padding-top: 2px;
border-bottom: #7b9ebd 1px solid;
}
.img {
filter:alpha(opacity=1,enabled=1) blendtrans(duration=1);
border:1px solid #CCCCCC;
}
-->
</style>
<script language="javascript">
var l=0;
var sum=0;
var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _fi = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();
var imgs=new Array();
var limg=new Array();
/* 渐隐渐现 */
function transImg(enable){
document.getElementById("showimg").filters.blendtrans.Apply();
document.getElementById("showimg").filters[0].enabled=enable;
document.getElementById("showimg").filters.blendtrans.Play();
}
/* 加载图片 */
function chk(){
l--;
document.getElementById("rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已加载：' + parseInt(((sum-
l)*100/sum)).toString() + '%'
if (l==0){
adRotator.play();
document.getElementById('stops').disabled='';
document.getElementById('next').disabled='';
}
}
if (document.images){
limg[0]=new Image();
limg[0].src="loading.gif";
for(var i=0;i<13;i++)
{
imgs[i]=new Image();
imgs[i].src=parseInt(i+1)+".jpg";
}
}
function adRotator() {}
function adRotator.add(p,w,h)
{
_mycars[_c] = p;
_w[_c] = w;
_h[_c] = h;
_c = _c + 1;
}
/* 播放设置 */
function adRotator.loads()
{
if (_i < _mycars.length && _l < 1)
{
_html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
if (_v < 1)
{
document.getElementById('image').value = _html + ',' + _i;
document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
_i = _i + 1;
document.getElementById('backs').disabled='';
transImg(1);
transImg(0);
window.setTimeout("adRotator.loads("+_i+")",_sf);
}
}
else
{
_html = '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
document.getElementById('image').value = _html + ',' + _i;
document.getElementById('rotatorPlayer').innerHTML = _html;
transImg(0);
transImg(1);
transImg(0);
}
if (_i+1 > _mycars.length)
{
document.getElementById('stops').disabled='True';
document.getElementById('play').disabled='';
document.getElementById('backs').disabled='';
document.getElementById('next').disabled='True';
_i = 0;
_v = 1;
}
}
/* 播放 */
function adRotator.play()
{
_v = 0;
_l = 0;
adRotator.loads();
}
/* 下一张 */
function adRotator.next()
{
_l = 1;
if(_i+1 < _mycars.length)
{
_i = _i + 1;
document.getElementById('play').disabled='';
document.getElementById('stops').disabled='True';
document.getElementById('backs').disabled='';
adRotator.loads();
}
else
{
document.getElementById('next').disabled='True';
}
}
/* 上一张 */
function adRotator.backs()
{
_l = 1;
if(_i-1 < 0)
{
document.getElementById('backs').disabled='True';
}
else
{
_i = _i - 1;
document.getElementById('play').disabled='';
document.getElementById('stops').disabled='True';
document.getElementById('next').disabled='';
adRotator.loads();
}
}
/* 间隔时间 */
function adRotator.set()
{
var _sfc = document.getElementById('second').value;
if (isInteger(_sfc))
{
_sf = _sfc * 1000;
}
else
{
alert('提示：只能输入数字！');
document.getElementById('second').value=1;
document.getElementById('second').select();
}
}
/* 字符检测 */
function isInteger(str)
{
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
/* 暂停 */
function adRotator.stops()
{
_v = 1;
}
/* 添加图片 */
for (var i=0;i<imgs.length;i++)
{
adRotator.add(imgs[i].src,400,300);
}
</script>
</head>
<body>
<table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="rotatorPlayer" style="text-align:center"><img src="loading.gif"><br><br>照片已加载：0%</div>
<br><br>
<input type="button" name="play" value="开始播放" onClick="adRotator.play();this.disabled='true';document.getElementById
('stops').disabled=''" disabled="True"/>
<input type="button" name="stops" value="暂停" onClick="adRotator.stops();this.disabled='true';document.getElementById
('play').disabled=''" disabled="True"/>
<input type="button" name="backs" value="上一张" onClick="adRotator.backs();" disabled="True"/>
<input type="button" name="next" value="下一张" onClick="adRotator.next();" disabled="True"/>
<input type="text" id="second" value="3" size="3" maxlength="2">
秒
<input type="button" value="设置时间" onClick="adRotator.set()" />
<br><br>
<input name="image" type="text" size="65"/>
</td>
</tr>
</table>
<script language="javascript">
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>
</html>
分享到：
相关推荐
在本压缩包中，你将找到与JavaScript幻灯片相关的源代码，这将是一个很好的学习和实践机会。 首先，我们要关注的是“document对象”。在JavaScript中，`document`是全局对象，它是整个HTML文档的代表，包含了访问和...
综上所述，实现JavaScript图片幻灯片涉及JavaScript基础知识、DOM操作、事件处理、动画效果以及用户体验等多个方面。通过学习和实践这些知识点，你可以创建出功能丰富且具有交互性的图片轮换效果。
"图片幻灯显示效果web页面源代码"是一个关于如何使用CSS和JavaScript实现这种效果的示例项目。接下来，我们将深入探讨这个主题，包括相关的核心技术、实现原理以及代码结构。 首先，CSS（层叠样式表）在这里主要...
标题中的“首页图片幻灯片公告栏js源代码”指的是一个JavaScript实现的网页元素，用于在网站的首页展示一组图片或公告，以动态滑动的形式吸引用户注意力。这种设计常见于许多网站的头部或者轮播区域，能够有效地展示...
【压缩包子文件的文件名称列表】只有一项："360旅游首页JS幻灯片效果代码"，这可能是包含所有源代码、CSS样式文件、示例图片以及可能的HTML结构文件的单一压缩文件。通常，这样的代码包会包括以下部分： 1. HTML...
本资源包名为“幻灯片源代码源文件网站图片特效”，包含了一系列用于创建动态、交互式图片展示的源代码，适用于js、css、flash+xml等多种技术栈。下面我们将详细探讨这些知识点。 首先，幻灯片效果通常是通过...
在分析这段代码之前，先来了解一下页面中图片切换的幻灯片效果是如何利用JavaScript来实现的。传统的幻灯片效果可能多使用Flash技术来实现，但随着Web技术的发展，JavaScript完全能够胜任这一任务，而且更为灵活和...
这个"Flash+XML幻灯片翻页轮换效果源代码"是一个实例，展示了如何利用这两者来创建一个动态且可自定义的展示系统。 Flash是一种广泛使用的矢量图形和动画创作平台，它允许开发者制作出互动性强、视觉效果丰富的网页...
在网页设计中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，使得动态交互变得...结合源代码学习和实践，开发者不仅可以实现基本的幻灯片功能，还能根据项目需求进行个性化的功能定制。
在这个页面中，开发者可以设置幻灯片的图片源、标题、描述等属性，并通过引用`jquery.nivo.slider.js`和`jquery.nivo.slider.pack.js`来实现JavaScript幻灯片功能。 3. `jquery.nivo.slider.js` 和 `jquery.nivo....
5. 自适应布局：考虑到不同设备和屏幕尺寸，JavaScript可以检测窗口大小变化，并相应地调整幻灯片的布局和图片尺寸，以实现响应式设计。 6. 键盘导航：为了提高可用性，可以添加键盘快捷键支持，让用户通过按键切换...
5. **JavaScript或jQuery**：虽然ASP是服务器端技术，但为了实现幻灯片的动态切换效果，通常会配合客户端的JavaScript或jQuery库。例如，可以使用jQuery的`.fadeIn()`和`.fadeOut()`方法实现图片的淡入淡出效果，...
本资源提供的"JS幻灯片源代码"是一个利用JavaScript实现的幻灯片展示系统，适用于网站中产品展示、图片轮播或信息滑动效果。 首先，`readme.htm`通常是项目中的说明文档，它可能包含了如何使用这个幻灯片源代码的...
本资源“基于CSS剪裁图片实现js幻灯片效果特效源码.zip”提供了一种利用JavaScript和CSS技术来创建幻灯片展示的方法。下面将详细介绍这个项目中的关键技术点和实现步骤。 首先，CSS（层叠样式表）在这个幻灯片效果...
描述中提到的“自动滚动的jQuery幻灯片播放图片效果”，意味着这个代码实现了一个无需用户操作就能自动切换的幻灯片。这种效果通常由一个定时器控制，每隔一段时间自动切换到下一张幻灯片。同时，为了提供更好的用户...
在这个“js结合php实现的图片幻灯片播放功能.rar”压缩包中，包含了一个使用JavaScript和PHP技术构建的图片幻灯片展示系统。这个系统在PHP服务器环境下运行，旨在为用户提供一个动态、交互式的图片浏览体验，具有...
在本案例中，我们讨论的是使用JavaScript实现的幻灯片效果，这种效果旨在为用户提供一种优雅的方式来展示一系列图片或内容，同时保持界面的简洁和吸引力。幻灯片通常会在网页上自动循环播放一组元素，比如图片、文本...
在网页设计和开发中，为了增加用户体验，经常使用JavaScript来实现各种动态效果，其中图片幻灯片就是一种常见的展示方式。本资源提供了一种“很不错的js图片幻灯片效果”，它能够以优雅的方式展示一组图片，用户可以...
标题中的“Flash和JS实现的图片幻灯片切换特效”是指使用Adobe Flash和JavaScript两种技术来创建一种动态的图片展示效果，通常这种效果被称为“图片轮播”或“幻灯片展示”。在网页设计中，这种功能常用于展示产品...
在本项目中，我们探讨了如何使用原生JavaScript来创建一个具有鼠标滚动功能的3D幻灯片效果，其中图片可以随着滚动放大和缩小，营造出一种酷炫的视觉体验。这种技术通常用于网站设计，以提升用户体验和交互性。 首先...