<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><%@ page 언어="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <br><% <BR>문자열 경로 = request.getContextPath(); <BR>String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 경로 "/"; <BR>%> <br><br><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <br><html> <br><머리> <br><base href="<%=basePath%>"> <br><br><title>내 JSP 'tu.jsp' 시작 페이지</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="내 페이지입니다"> <br><style type="text/css"> <br>* { <br>여백: 0px; <br>패딩: 0px; <br>} <br>li { <br>목록 스타일: 없음; <br>} <br>img { <br>테두리: 0; <br>} <br>a { <br>텍스트 장식: 없음; <br>} <br>#슬라이드 { <br>너비: 800px; <br>높이: 400px; <br>상자 그림자: 0px 0px 5px #c1c1c1; <br>여백: 20px 자동; <br>위치: 친척; <br>오버플로: 숨김; <br>} <br>#slide ul { <br>위치: 절대; <br>왼쪽: 0px; <br>상단: 0px; <br>높이: 400px; <br>너비: 11930px; <br>} <br>#slide ul li { <br>너비: 800px; <br>높이: 400px; <br>오버플로: 숨김; <br>플로트: 왼쪽; <br>} <br>#slide .ico { <br>너비: 800px; <br>높이: 20px; <br>오버플로: 숨김; <br>텍스트 정렬: 가운데; <br>위치: 절대; <br>왼쪽: 0px; <br>하단: 10px; <br>z-색인: 1; <br>} <br>#slide .ico a { <br>디스플레이: 인라인 블록; <br>너비: 10px; <br>높이:10px; <br>배경: url(out.png) 반복 없음 0px 0px; <br>여백: 0px 5px; <br>} <br>#slide .ico .active { <br>배경: url(out1.png) 반복 없음 0px 0px; <br>} <br>#btnLeft { <br>너비: 60px; <br>높이: 400px; <br>왼쪽: 0px; <br>상단: 0px; <br>배경: url() 반복 없음 0px 0px; <br>위치: 절대; <br>z-색인: 2; <br>} <br>#btnLeft :hover { <br> background: url() no-repeat 0px 0px; <br>} <br>#btnRight { <br>너비: 60px; <br>높이: 400px; <br>오른쪽: 0px; <br>상단: 0px; <br>배경: url() 반복 없음 0px 0px; <br>위치: 절대; <br>z-색인: 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>이동(this.index); <BR>//aIco[this.index].className = "활성"; <BR>} <BR>} <BR>oBtnLeft.onclick = function() { <BR>iNow ; <BR>//document.title = iNow; <BR>이동(iNow); <BR>} <BR>oBtnRight.onclick = function() { <BR>iNow --; <BR>document.title = iNow; <BR>이동(iNow); <BR>} <br><br>var curIndex = 0; <BR>var timeInterval = 1000; <BR>setInterval(change,timeInterval); <BR>함수 변경() { <BR>if(curIndex == aBtn.length) { <BR>curIndex =0; <BR>} else { <BR>이동(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 = 색인; <br>} <br>if(index<0) { <BR>index = aLi.length - 1; <BR>iNow = 색인; <BR>} <BR>for(var n=0;n<aBtn.length;n ) { <BR>aBtn[n].className = ""; <BR>} <BR>aBtn[index].className = "활성"; <BR>oUl[0].style.left = -index * baseWidth "px"; <BR>//buffer(oUl[0],{ <BR>// 왼쪽: -index * baseWidth <BR>// },8) <br><br>} <BR>}<BR></script> <br></head> <br><본문> <br><div id="슬라이드"> <br><a id="btnLeft" href="javascript:void(0);" ></a> <br><a id="btnRight" href="javascript:void(0);" ></a> <br><!--다음 이미지 변경 시:style="왼쪽: -(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></body> <br></html> <br> </div>
