📄 14-1 javascript相册.htm
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>14-1 JavaScript相册</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; background-color:buttonface; }
#album { width:400px; height:300px; border:1px solid black; position:relative; background-color:white; }
#album img {
position:absolute; border-style:none;
filter:progid:DXImageTransform.Microsoft.RevealTrans(duration=1) progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=135);
}
</style>
<script>
//定义全局变量
var album_list, imgs_cache, trans_interval;
//全局变量“album_list”保存相册用到的图片URL地址列表
var album_list = [
"inc\\img\\14-1 1.gif", "inc\\img\\14-1 2.jpg", "inc\\img\\14-1 3.jpg",
"inc\\img\\14-1 4.jpg", "not exists pic", "inc\\img\\14-1 5.jpg"
];
//全局变量“trans_interval”定义相册图片切换速度
trans_interval = 4000;
//函数“album_img_loadCache”自缓存中载入图片
//参数“img”为需要载入的缓存图片，“noFilter”标识是否需要使用转换滤镜
function album_img_loadCache(img, noFilter){
var mw, mh, w0, h0, w, h;
//计算图片的尺寸
//变量“mw”和“mh”是图片可以采取的最大宽度和高度
mw = this.parentNode.offsetWidth-15;
mh = this.parentNode.offsetHeight-15;
//变量“w0”和“h0”是图片的实际尺寸
w0 = img.width;
h0 = img.height;
//根据长宽比例不同，计算自适应后图片的尺寸
if(w0/h0 > mw/mh){
w = mw; h = w * h0 / w0;
}else{
h = mh; w = h * w0 / h0;
}
//记录当前图片的编号
this.index = img.index;
//准备动态转换滤镜
if(!noFilter)this.filters[0].transition = 23;
if(!noFilter)this.filters[0].apply();
//载入缓存中的图片内容
this.src= img.src;
//改变图片尺寸
this.style.width = w + "px";
this.style.height = h + "px";
//图片自动居中
this.style.left = parseInt((mw-w)/2) + 5 +"px";
this.style.top = parseInt((mh-h)/2) + 5 +"px";
//调用转换滤镜，完成实际的切换显示
if(!noFilter)this.filters[0].play();
}
//函数“auto_play”本质是一个定时函数，用来完成指定间隔的图片切换
function auto_play(){
var i;
i = $("album").img.index;
//判读图片载入状态，如果图片载入失败则跳过
do{
//采用取余数算法，避免数组下标越界
//当越界时自动变为从头开始
i = ++i % imgs_cache.length;
}while(imgs_cache[i].err);
//调用相册图片对象的方法载入相应缓存
$("album").img.loadCache(imgs_cache[i]);
setTimeout(auto_play, trans_interval);
}
//缓存图片载入失败后，标记此图片状态
function img_onerror(){ this.err = true; }
//缓存图片载入成功后，标记此图片状态
function img_onload(){
this.loaded = true;
//在第一个图片载入成功后，初始化相册，并载入此图片
if(!$("album").img)init_album(this);
}
//函数“init_album”用于初始化相册
function init_album(img){
//清空相册中“正在载入图片”的提示信息
$("album").innerHTML = "";
//向相册容器中插入用于显示的图片
$("album").img = new Image();
$("album").img.album = $("album");
$("album").appendChild($("album").img);
//自定义相册图片的方法
$("album").img.loadCache = album_img_loadCache;
//初始化相册图片，由于是初始化载入，因此不需要动态滤镜切换
$("album").img.loadCache(img, true);
//开始自动播放
setTimeout(auto_play, trans_interval);
}
//预载图片
function preload_imgs(){
imgs_cache = new Array();
for(var i=0; i<album_list.length; i++){
imgs_cache[i] = new Image();
imgs_cache[i].index = i;
imgs_cache[i].onload = img_onload;
imgs_cache[i].onerror = img_onerror;
imgs_cache[i].src = album_list[i];
}
}
function $(str){ return(document.getElementById(str)); }
//页面载入后开始预载相册图片
window.onload=function(){
preload_imgs();
}
</script>
</head>
<body>
<label>我的相册</label>
<div id="album">相册图片载入中...</div>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -