复制代码代码如下：
<％@ 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>