<div class="codetitle"> <span><a style="CURSOR: pointer" data="22079" class="copybut" id="copybut22079" onclick="doCopy('code22079')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code22079"> <br> <br>String path = request.getContextPath(); <br>String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; <br>%> <br><br> <br> <br> <br><base href="<%=basePath%>"> <br><br><title>My JSP 'tu.jsp' starting page</title> <br><br><meta http-equiv="pragma" content="no-cache"> <br><meta http-equiv="cache-control" content="no-cache"> <br><meta http-equiv="expires" content="0"> <br><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <br><meta http-equiv="description" content="This is my page"> <br><style type="text/css"> <BR>* { <BR>margin: 0px; <BR>padding: 0px; <BR>} <BR>li { <BR>list-style: none; <BR>} <BR>img { <BR>border: 0; <BR>} <BR>a { <BR>text-decoration: none; <BR>} <BR>#slide { <BR>width: 800px; <BR>height: 400px; <BR>box-shadow: 0px 0px 5px #c1c1c1; <BR>margin: 20px auto; <BR>position: relative; <BR>overflow: hidden; <BR>} <BR>#slide ul { <BR>position: absolute; <BR>left: 0px; <BR>top: 0px; <BR>height: 400px; <BR>width: 11930px; <BR>} <BR>#slide ul li { <BR>width: 800px; <BR>height: 400px; <BR>overflow: hidden; <BR>float: left; <BR>} <BR>#slide .ico { <BR>width: 800px; <BR>height: 20px; <BR>overflow: hidden; <BR>text-align: center; <BR>position: absolute; <BR>left: 0px; <BR>bottom: 10px; <BR>z-index: 1; <BR>} <BR>#slide .ico a { <BR>display: inline-block; <BR>width: 10px; <BR>height:10px; <BR>background: url(out.png) no-repeat 0px 0px; <BR>margin: 0px 5px; <BR>} <BR>#slide .ico .active { <BR>background: url(out1.png) no-repeat 0px 0px; <BR>} <BR>#btnLeft { <BR>width: 60px; <BR>height: 400px; <BR>left: 0px; <BR>top: 0px; <BR>background: url() no-repeat 0px 0px; <BR>position: absolute; <BR>z-index: 2; <BR>} <BR>#btnLeft :hover { <BR>background: url() no-repeat 0px 0px; <BR>} <BR>#btnRight { <BR>width: 60px; <BR>height: 400px; <BR>right: 0px; <BR>top: 0px; <BR>background: url() no-repeat 0px 0px; <BR>position: absolute; <BR>z-index: 2; <BR>} <BR>#btnRight :hover { <BR>background: url() no-repeat 0px 0px; <BR>} <br><br></style> <br><br><script type="text/javascript"> <BR>window.onload = function() { <BR>var oIco = document.getElementById("ico"); <BR>var aBtn = oIco.getElementsByTagName("a"); <BR>var oSlide = document.getElementById("slide"); <BR>var oUl = oSlide.getElementsByTagName("ul"); <BR>var aLi = oUl[0].getElementsByTagName("li"); <BR>var oBtnLeft = document.getElementById("btnLeft"); <BR>var oBtnRight = document.getElementById("btnRight"); <br><br>var baseWidth = aLi[0].offsetWidth; <BR>//alert(baseWidth); <BR>oUl[0].style.width = baseWidth * aLi.length + "px"; <BR>var iNow = 0; <BR>for(var i=0;i<aBtn.length;i++) { <BR>aBtn[i].index = i; <BR>aBtn[i].onclick = function() { <BR>//alert(this.index); <BR>//alert(oUl[0].style.left); <BR>move(this.index); <BR>//aIco[this.index].className = "active"; <BR>} <BR>} <BR>oBtnLeft.onclick = function() { <BR>iNow ++; <BR>//document.title = iNow; <BR>move(iNow); <BR>} <BR>oBtnRight.onclick = function() { <BR>iNow --; <BR>document.title = iNow; <BR>move(iNow); <BR>} <br><br>var curIndex = 0; <BR>var timeInterval = 1000; <BR>setInterval(change,timeInterval); <BR>function change() { <BR>if(curIndex == aBtn.length) { <BR>curIndex =0; <BR>} else { <BR>move(curIndex); <BR>curIndex += 1; <BR>} <br><br>} <br><br>function move(index) { <BR>//document.title = index; <BR>if(index>aLi.length-1) { <BR>index = 0; <BR>iNow = index; <BR>} <BR>if(index<0) { <BR>index = aLi.length - 1; <BR>iNow = index; <BR>} <BR>for(var n=0;n<aBtn.length;n++) { <BR>aBtn[n].className = ""; <BR>} <BR>aBtn[index].className = "active"; <BR>oUl[0].style.left = -index * baseWidth + "px"; <BR>//buffer(oUl[0],{ <BR>// left: -index * baseWidth <BR>// },8) <br><br>} <BR>} <BR></script> <br> <br> <br><div id="slide"> <br><a id="btnLeft" href="javascript:void(0);"></a> <br><a id="btnRight" href="javascript:void(0);"></a> <br><!--when change next image:style="left: -(n-1)*800px;"--> <br><ul> <br><li><img src="images/anniu.png" alt=""></li> <br><li><img src="images/zhu2.png" alt=""></li> <br><li><img src="images/xiangqing5.png" alt=""></li> <br><li><img src="images/wanle.png" alt=""></li> <br> </ul> <br><div id="ico" class="ico"> <br><a class="active" href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br><a href="javascript:void(0);"></a> <br> </div> <br> </div> <br> <br> <br> </div>
