<%@pagelanguage="java"import="java.util.*"pageEncoding="ISO-8859-1"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'tu.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
img{
border:0;
}
a{
text-decoration:none;
}
#slide{
width:800px;
height:400px;
box-shadow:0px0px5px#c1c1c1;
margin:20pxauto;
position:relative;
overflow:hidden;
}
#slideul{
position:absolute;
left:0px;
top:0px;
height:400px;
width:11930px;
}
#slideulli{
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.icoa{
display:inline-block;
width:10px;
height:10px;
background:url(out.png)no-repeat0px0px;
margin:0px5px;
}
#slide.ico.active{
background:url(out1.png)no-repeat0px0px;
}
#btnLeft{
width:60px;
height:400px;
left:0px;
top:0px;
background:url()no-repeat0px0px;
position:absolute;
z-index:2;
}
#btnLeft:hover{
background:url()no-repeat0px0px;
}
#btnRight{
width:60px;
height:400px;
right:0px;
top:0px;
background:url()no-repeat0px0px;
position:absolute;
z-index:2;
}
#btnRight:hover{
background:url()no-repeat0px0px;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
varoIco=document.getElementById("ico");
varaBtn=oIco.getElementsByTagName("a");
varoSlide=document.getElementById("slide");
varoUl=oSlide.getElementsByTagName("ul");
varaLi=oUl[0].getElementsByTagName("li");
varoBtnLeft=document.getElementById("btnLeft");
varoBtnRight=document.getElementById("btnRight");
varbaseWidth=aLi[0].offsetWidth;
//alert(baseWidth);
oUl[0].style.width=baseWidth*aLi.length+"px";
variNow=0;
for(vari=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);
}
varcurIndex=0;
vartimeInterval=1000;
setInterval(change,timeInterval);
functionchange(){
if(curIndex==aBtn.length){
curIndex=0;
}else{
move(curIndex);
curIndex+=1;
}
}
functionmove(index){
//document.title=index;
if(index>aLi.length-1){
index=0;
iNow=index;
}
if(index<0){
index=aLi.length-1;
iNow=index;
}
for(varn=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>
<divid="slide">
<aid="btnLeft"href="javascript:void(0);"></a>
<aid="btnRight"href="javascript:void(0);"></a>
<!--whenchangenextimage:style="left:-(n-1)*800px;"-->
<ul>
<li><imgsrc="images/anniu.png"alt=""/></li>
<li><imgsrc="images/zhu2.png"alt=""/></li>
<li><imgsrc="images/xiangqing5.png"alt=""/></li>
<li><imgsrc="images/wanle.png"alt=""/></li>
</ul>
<divid="ico">
<ahref="javascript:void(0);"></a>
<ahref="javascript:void(0);"></a>
<ahref="javascript:void(0);"></a>
<ahref="javascript:void(0);"></a>
<ahref="javascript:void(0);"></a>
<ahref="javascript:void(0);"></a>
</div>
</div>
</body>
</html>
