复制代码代码如下：
<％@ページ言語= "java" import = "java.util。*" pageencoding = "iso-8859-1"％>
<％
string path = request.getContextPath（）;
string basepath = request.getscheme（）+"：//"+request.getServername（）+"："+request.getServerport（）+path+"/";
％>
<！doctype html public " - // w3c // dtd html 4.01 transitional // en">
<html>
<head>
<base href = "<％= basepath％>">
<Title>私のjsp 'tu.jsp'開始ページ</title>
<メタhttp-equiv = "pragma" content = "no-cache">
<Meta http-equiv = "cache-control" content = "no-cache">
<メタhttp-equiv = "expires" content = "0">
<meta http-equiv = "keywords" content = "keyword2、keyword3">
<メタhttp-equiv = "description" content = "これは私のページ">
<style type = "text/css">
* {
マージン：0px;
パディング：0px;
}
li {
リストスタイル：なし;
}
img {
ボーダー：0;
}
{
テキスト装置：なし;
}
#slide {
幅：800px;
高さ：400px;
Box-Shadow：0PX 0PX 5PX＃C1C1C1;
マージン：20px Auto;
位置：相対;
オーバーフロー：隠し;
}
#slide ul {
位置：絶対;
左：0px;
上：0px;
高さ：400px;
幅：11930px;
}
#slide ul li {
幅：800px;
高さ：400px;
オーバーフロー：隠し;
フロート：左;
}
#slide .ico {
幅：800px;
高さ：20px;
オーバーフロー：隠し;
テキストアライグ：センター;
位置：絶対;
左：0px;
下：10px;
z-index：1;
}
#slide .ico a {
ディスプレイ：インラインブロック。
幅：10px;
高さ：10px;
背景：url（out.png）繰り返し0px 0px;
マージン：0px 5px;
}
#slide .ico .active {
背景：url（out1.png）繰り返し0px 0px;
}
#btnleft {
幅：60px;
高さ：400px;
左：0px;
上：0px;
背景：url（）no-repeat 0px 0px;
位置：絶対;
z-index：2;
}
#btnleft：hover {
背景：url（）no-repeat 0px 0px;
}
#btnright {
幅：60px;
高さ：400px;
右：0px;
上：0px;
背景：url（）no-repeat 0px 0px;
位置：絶対;
z-index：2;
}
#btnright：hover {
背景：url（）no-repeat 0px 0px;
}
</style>
<script type = "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 = oul [0] .getelementsbytagname（ "li"）;
var obtnleft = document.getElementById（ "btnleft"）;
var obtnright = document.getElementById（ "btnright"）;
var baseWidth = ali [0] .OffsetWidth;
// alert（basewidth）;
oul [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(TOl.Left）;
移動（this.index）;
//aico [this.index] .classname = "Active";
}
}
obtnleft.onclick = function（）{
inow ++;
//document.title = inow;
移動（inow）;
}
obtnright.onclick = function（）{
inow-;
document.title = inow;
移動（inow）;
}
var curindex = 0;
var timeinterval = 1000;
setInterval（change、timeinterval）;
関数変化（）{
if（curindex == abtn.length）{
curindex = 0;
} それ以外 {
移動（curindex）;
curindex += 1;
}
}
関数移動（index）{
//document.title = index;
if（index> ali.length-1）{
index = 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";
oul [0] .style.left = -index * baseWidth + "px";
// buffer（oul [0]、{
//左：-index * baseWidth
//}、8）
}
}
</script>
</head>
<body>
<div id = "slide">
<a id = "btnleft" href = "javascript：void（0）;" > </a>
<a id = "btnright" href = "javascript：void（0）;" > </a>
<！ - 次の画像を変更するとき：style = "left： - （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>