源程序:
<!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>
分享到:
相关推荐
好几个页面的特效 有源代码 有幻灯片 可供练习
利用css+javascript现在图片幻灯显示
网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,需要的朋友可以参考下
这是一个用JavaScript实现的幻灯片效果源代码,希望对大家有帮助
JavaScript基本要素JavaScript基础幻灯片的源代码
-----简单代码源代码系列------ JS结合CSS编写的幻灯片特效控件。封装完整、使用方便,拥有超炫的切换效果,切换倒计时进度条显示,点击图片可以链接到指定url,每张图片下可以显示标题,当标题超过一行时,移动...
摘要:脚本资源,Ajax/JavaScript,CSS图片切换 无JS实现的图片切换,CSS图片幻灯片切换特效,同时也实现了说明文字的动画效果,幻灯片上下切换,带播放进度条,进度条走到头,图片就切换至下一张,用来学习CSS3想当...
HTML5+js实现非常带感的3D立体图片相册代码 特效查看地址http://www.198zone.com/codedemo/?id=1053
Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰效果 Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、...
9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿...
我在 Akka.Net @dotnetmalaga 2015 上的演讲的幻灯片和源代码 我做了2个演示: -- 抱歉没有源代码,因为它不是我自己的! 使用 Akka.net 进行推文情绪分析——源代码可用 哈维尔·加西亚·麦格纳 - @ndsrf 基于 ...
JavaScript Conference亚美尼亚源代码 介绍 EcmaScript 5/6/7/8,关于各种异步编程类型。 介绍一个使用fs模块的应用程序,该模块以所有异步类型(回调,promise,generator,async / await)编写。 进行异步编程...
在之前,我们已经分享几款幻灯片的作品,一款是 coin slider 幻灯片轮播插件,适应各种设备...的概念都是一样的,因此这次我不打算放太多的源代码来浪费读者的时间,本实例最大的不, 和组来切换图片和幻灯片面板的缩放
本资料包括Javascript的幻灯片,以及源代码等。另外有Javascript语言常用的一些语句。
9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感...
摘要:脚本资源,Ajax/JavaScript,JS幻灯片 旅游网站上的JS幻灯片,横长,滚动切换形式。经典的JS图片切换代码,先收藏以备后用吧。
1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎...
ArcGIS API for JavaScript:自定义小部件将在上介绍。 主讲人:艾伦·桑玛,马特·德里斯科尔,胡安·卡洛斯·佛朗哥,埃斯里在本课程中,我们将介绍如何在ArcGIS API 4.x for JavaScript中自定义窗口小部件。 您将...