📄 index.jsp
字号:
<%@ page contentType="text/html; charset=gb2312" language="java" %>
<html>
<head>
<title>幻灯片式图片播放</title>
<link href="Css/style.css" rel="stylesheet"/>
<SCRIPT language="javascript">
//指定要显示的图片路径
var sImgArr=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg");
var plImg = new Image();
var gIndex = 0;
function SlideImg(index){
gIndex = index;
if ('Microsoft Internet Explorer' == navigator.appName) {
document.images["slideImg"].filters.item(0).Apply();
}
document.images["slideImg"].src = sImgArr[index];
if ('Microsoft Internet Explorer' == navigator.appName){
document.images["slideImg"].filters.item(0).play();
}
}
function NextImg(){ //显示下一张图片
gIndex = ((gIndex+1)>=sImgArr.length?0:(gIndex+1));
SlideImg(gIndex);
}
function PrevImg(){ //显示前一张图片
gIndex = ((gIndex-1)<0?(sImgArr.length-1):(gIndex-1));
SlideImg(gIndex);
}
var sid;
function inislide(){ //设置自动运行
if(sid==null){
sid = setInterval('NextImg()', 3000);
}
}
</SCRIPT>
</head>
<body onLoad="inislide()">
<div align="center">
<table width="410" height="350" border="0" cellpadding="0" cellspacing="0" background="images/bg.jpg">
<tr>
<td width="67" height="302" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="14"></td>
</tr>
<tr>
<td width="4%" height="274"> </td>
<td width="92%" valign="top"><img src="images/1.jpg" name="slideImg" width="379" height="275" id="slideImg" style="BORDER-TOP: #000 1px solid; FILTER: revealtrans(duration=2.0,transition=10); BORDER-BOTTOM: #000 1px solid"></td>
<td width="4%"> </td>
</tr>
<tr>
<td height="64" colspan="3" valign="top"><img src="images/bg_1.jpg" width="410" height="66" border="0" usemap="#Map"></td>
</tr>
</table></td>
</tr>
</table>
</div>
<map name="Map">
<area shape="circle" coords="214,32,17" href="#" onClick="PrevImg()">
<area shape="circle" coords="272,32,16" href="#" onClick="NextImg()"></map></body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -