프론트
버튼 누르면 이미지 변경
hyun9_9
2024. 1. 16. 22:18
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#photo{
width : 600px;
height : 500px;
border: 3px solid black;
/* 넘치는것 */
overflow: hidden;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready( function() {
//div 개수
var total=$("#photo > div").length;
var num=1;
$(".pageNumber > span:first").text(num);
$(".pageNumber > span:last").text(total);
//일반적으론 id를 부여함
$(".prev").click(function() {
num--;
if(num<1){
num=total;
}
//이전보기를 하면 뒤의사진을 처음 요소
$("#photo div:last").insertBefore("#photo div:first");
$(".pageNumber > span:first").text(num);
});
$(".next").click(function() {
num++;
if(num>total){
num=1;
}
$("#photo div:first").insertAfter("#photo div:last");
$(".pageNumber > span:first").text(num);
});
});
</script>
</head>
<body>
<!-- 항상 박스로 감사 놓고 시작하는 것이 일반적 -->
<div id="wrapper">
<div class="pageInfo">
<!-- 메시지를 띄울땐 일반적으로 스판태그를 사용한다 -->
<span class="pageNumber">
<span></span> / <span></span>
</span>
<button class="prev"><</button>
<button class="next">></button>
</div>
<div id="photo">
<div><img alt="이미지 01" src="images/1.jpg"></div>
<div><img alt="이미지 02" src="images/2.jpg"></div>
<div><img alt="이미지 03" src="images/3.jpg"></div>
</div>
</div>
</body>
</html>