二.多种播放方式及停止功能
<script>
var l=0;
var imgs;
var sum=0;
var imgs=new Array();
var RANDOM=1;//随机播放
var ASC=2;//顺序播放
var DESC=3;//逆序播放
var ST=9;//逆序播放
var currId=0;//当前图片id
var action=ASC;//默认是顺序播放
function chk(){
l--;
document.getElementById("aa").innerText=""+((sum-l)*100/sum)+"%"
var myobj=document.getElementById("bb");
myobj.style.width=((sum-l)*100/sum)*200/100;
if (l==0){
document.getElementById("a").style.display='none';
document.getElementById("bodyy").style.display="block"
playImg();
}
}
function playImg(){
var tip="播放顺序:";
switch (action){
case ASC:
tip+="顺序播放";
currId=(currId+1)%imgs.length;
break;
case DESC:
currId=(currId+imgs.length-1)%imgs.length;
tip+="反序播放";
break;
case RANDOM:
currId=Math.floor(Math.random()*(imgs.length-1))
tip+="随机播放";
case ST:
currId=(currId)%imgs.length;
tip+="停止播放";
break;
}
tip+="\n当前图片id是"+currId;
var myImg=document.getElementById('myImg')
myImg.title=tip;
myImg.src="/imgs[currId].src";
setTimeout("playImg()",3000);
}
if (document.images){
imgs[0]=new Image()
imgs[1]=new Image()
imgs[2]=new Image()
imgs[3]=new Image()
imgs[4]=new Image()
//下面使用网络上的大图片
imgs[0].src="/img/1.jpg";
imgs[1].src="/img/2.jpg";
imgs[2].src="/img/3.jpg";
imgs[3].src="/img/4.jpg";
imgs[4].src="/img/5.jpg";
}
</script>
<style type="text/css">
<!--
#a {
height: 20px;
width: 200px;
border: 2px solid #666666;
}
#a #aa {
height: 20px;
position: absolute;
}
#a #bb {
background-color: #FF0000;
height: 20px;
width: 0px;
}
#bodyy {
width: 100%;
display:none;
}
-->
</style>
<body>
<div id="a">
<div id="aa">0%</div>
<div id="bb"></div>
</div>
<div id="bodyy">
<img id="myImg" style="display:block;width:600px;"/>
<button onclick="action=RANDOM;">随机播放</button>
<button onclick="action=ASC;">顺序播放</button>
<button onclick="action=DESC;">反序播放</button>
<button onclick="action=ST;">停止播放</button>
</div>
<script>
sum=l=imgs.length;
for (var i=0;i<l;i++){
imgs[i].onload=chk;
imgs[i].onerror=chk;//无论图片是否加载成功，都执行指定方法
}
</script>
</body>
| 
