複製代碼代碼如下：
<％@ page Lakenagen =“ java” import =“ java.util。*” pageencoding =“ iso-8859-1”％>
<％
字符串路徑= request.getContextPath（）;
字符串basepath = request.getScheme（）+“：//”+request.getServername（）+“：”+request.getServerport（）+path+path+“/”;
％>
<！ doctype html公共” - // W3C // DTD HTML 4.01 Transitional // en>
<html>
<頭>
<base href =“ <％= basepath％>”>
<title>我的JSP'Tu.jsp'起始頁</title>
<meta http-equiv =“ pragma” content =“ no-cache”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta http-equiv =“ expires” content =“ 0”>
<meta http-equiv =“關鍵字” content =“ keyword1，keyword2，keyword3”>
<meta http-equiv =“描述” content =“這是我的頁面”>
<style type =“ text/css”>
* {
保證金：0px;
填充：0px;
}
li {
列表風格：無；
}
img {
邊界：0;
}
a {
文本介紹：無；
}
＃滑動 {
寬度：800px;
身高：400px;
盒子陰影：0px 0px 5px＃c1c1c1;
保證金：20px自動；
位置：相對；
溢出：隱藏；
}
#slide ul {
位置：絕對；
左：0px;
頂部：0px;
身高：400px;
寬度：11930px;
}
#slide ul li {
寬度：800px;
身高：400px;
溢出：隱藏；
浮子：左；
}
#slide .ico {
寬度：800px;
身高：20px;
溢出：隱藏；
文字平衡：中心；
位置：絕對；
左：0px;
底部：10px;
z索引：1;
}
#slide .ico a {
顯示：內聯塊；
寬度：10px;
身高：10px;
背景：url（out.png）no-repeat 0px 0px;
保證金：0px 5px;
}
#slide .ico .Active {
背景：URL（out1.png）no-repeat 0px 0px;
}
#btnleft {
寬度：60px;
身高：400px;
左：0px;
頂部：0px;
背景：url（）no-repeat 0px 0px;
位置：絕對；
z索引：2;
}
#btnleft：懸停{
背景：url（）no-repeat 0px 0px;
}
#btnright {
寬度：60px;
身高：400px;
右：0px;
頂部：0px;
背景：url（）no-repeat 0px 0px;
位置：絕對；
z索引：2;
}
#btnright：Hover {
背景：url（）no-repeat 0px 0px;
}
</style>
<腳本類型=“ text/javascript”>
window.onload = function（）{
var oico = document.getElementById（“ ico”）;
var abtn = oico.getElementsbytagname（“ a”）;
var oslide = document.getElementById（“ slide”）;
var oul = oslide.getElementsbytagname（“ ul”）;
var ali = ououl [0] .getElementsBytagName（“ li”）;
var abtnleft = document.getElementById（“ btnleft”）;
var getnright = document.getElementById（“ btnright”）;
var baseWidth = ali [0] .offsetWidth;
// alert（baseWidth）;
ououl [0] .style.width = baseWidth * ali.length +“ px”;
var inow = 0;
for（var i = 0; i <abtn.length; i ++）{
abtn [i] .index = i;
abtn [i] .onclick = function（）{
// alert（this.index）;
// alert(Ul [0] style.left）;
移動（this.index）;
//aico [this.index] className =“ active”;
}
}
getnleft.onclick = function（）{
Inow ++;
//document.title = inow;
移動（inow）;
}
getnright.onclick = function（）{
Inow-;
document.title = inow;
移動（inow）;
}
var curindex = 0;
var TimeInterval = 1000;
setInterval（更改，TimeInterval）;
函數更改（）{
if（curindex == abtn.length）{
Curindex = 0;
} 別的 {
移動（Curindex）;
Curindex += 1;
}
}
功能移動（索引）{
//document.title = index;
if（index> ali.length-1）{
索引= 0;
inow = index;
}
if（index <0）{
index = ali.length -1;
inow = index;
}
for（var n = 0; n <abtn.length; n ++）{
abtn [n] .className =“”;
}
abtn [index] .className =“ active”;
ououl [0] .style.left = -Index * baseWidth +“ px”;
// buffer（ououl [0]，{
//左：-Index * basewidth
//}，8）
}
}
</script>
</head>
<身體>
<div ID =“ slide”>
<a id =“ btnleft” href =“ javascript：void（0）;” > </a>
<a id =“ btnright” href =“ javascript：void（0）;” > </a>
<！ - 當更改下一個圖像時：style =“左： - （n-1）*800px;” - >
<ul>
<li> <img src =“ images/anniu.png”/> </li>
<li> <img src =“ images/zhu2.png”/> </li>
<li> <img src =“ images/xiangqing5.png”/> </li>
<li> <img src =“ images/wanle.png”/> </li>
</ul>
<div ID =“ ICO”>
<a href =“ javascript：void（0）;”> </a>
<a href =“ javascript：void（0）;”> </a>
<a href =“ javascript：void（0）;”> </a>
<a href =“ javascript：void（0）;”> </a>
<a href =“ javascript：void（0）;”> </a>
<a href =“ javascript：void（0）;”> </a>
</div>
</div>
</body>
</html>