 
<%@ page language="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>My JSP 'tu.jsp' starting page</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="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<style type="text/css"> 
* { 
margin: 0px; 
padding: 0px; 
} 
li { 
list-style: none; 
} 
img { 
border: 0; 
} 
a { 
text-decoration: none; 
} 
#slide { 
width: 800px; 
height: 400px; 
box-shadow: 0px 0px 5px #c1c1c1; 
margin: 20px auto; 
position: relative; 
overflow: hidden; 
} 
#slide ul { 
position: absolute; 
left: 0px; 
top: 0px; 
height: 400px; 
width: 11930px; 
} 
#slide ul li { 
width: 800px; 
height: 400px; 
overflow: hidden; 
float: left; 
} 
#slide .ico { 
width: 800px; 
height: 20px; 
overflow: hidden; 
text-align: center; 
position: absolute; 
left: 0px; 
bottom: 10px; 
z-index: 1; 
} 
#slide .ico a { 
display: inline-block; 
width: 10px; 
height:10px; 
background: url(out.png) no-repeat 0px 0px; 
margin: 0px 5px; 
} 
#slide .ico .active { 
background: url(out1.png) no-repeat 0px 0px; 
} 
#btnLeft { 
width: 60px; 
height: 400px; 
left: 0px; 
top: 0px; 
background: url() no-repeat 0px 0px; 
position: absolute; 
z-index: 2; 
} 
#btnLeft :hover { 
background: url() no-repeat 0px 0px; 
} 
#btnRight { 
width: 60px; 
height: 400px; 
right: 0px; 
top: 0px; 
background: url() no-repeat 0px 0px; 
position: absolute; 
z-index: 2; 
} 
#btnRight :hover { 
background: 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(oUl[0].style.left); 
move(this.index); 
//aIco[this.index].className = "active"; 
} 
} 
oBtnLeft.onclick = function() { 
iNow ++; 
//document.title = iNow; 
move(iNow); 
} 
oBtnRight.onclick = function() { 
iNow --; 
document.title = iNow; 
move(iNow); 
} 

var curIndex = 0; 
var timeInterval = 1000; 
setInterval(change,timeInterval); 
function change() { 
if(curIndex == aBtn.length) { 
curIndex =0; 
} else { 
move(curIndex); 
curIndex += 1; 
} 

} 

function move(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],{ 
// left: -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> 
<!--when change next image:style="left: -(n-1)*800px;"--> 
<ul> 
<li><img src="images/anniu.png" alt="" /></li> 
<li><img src="images/zhu2.png" alt="" /></li> 
<li><img src="images/xiangqing5.png" alt="" /></li> 
<li><img src="images/wanle.png" alt="" /></li> 
</ul> 
<div id="ico" class="ico"> 
<a class="active" 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> 