광고 혹은 사진들을 다음 / 이전 으로 넘겨가면서 볼 수 있게 해주는 기능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>광고배너, 갤러리</title>
<style type="text/css">
*{ /* 원래 이렇게 하면 안됨!!*/
margin: 0px;
padding: 0px;
}
#content{
width: 200px;
margin: 20px;
}
#content .page{
text-align: right;
margin: 5px;
}
#content .page button{
background: lightblue;
color: white;
width: 20px;
height: 20px;
overflow: hidden; /*글자가 어차피 오버플로우 되서 꺼버림*/
border: none;
line-height: 1.5; /*글자 배율*/
}
#content .pic{
width: 150px;
height: 150px;
border: 3px solid blue;
overflow: hidden;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var total=$(".pic > div").length; // 4
var curr=1;
$(".pageInfo > span:first").text(curr); // 첫번 째 가상 요소 선택자
$(".pageInfo > span:last").text(total); // 마지막 가상요소 선택자
$(".nextBtn").click(function(){ // 버튼 눌렀을 때 일어나는 일 , nextBtn.을 클릭하면
curr++;
if(curr>total){
curr=1;
}
$(".pageInfo > span:first").text(curr);
$(".pic div:first").insertAfter(".pic div:last"); // 맨 앞에 있는 요소를 맨 뒤로
});
$(".prevBtn").click(function(){
curr--;
if(curr<1){
curr=total;
}
$(".pageInfo > span:first").text(curr);
$(".pic div:last").insertBefore(".pic div:first");
});
});
</script>
<div id="content">
<div class="page">
<span class="pageInfo">
<span></span>/<span></span>
</span> <!-- 일반적으로 텍스트는 span으로 처리 -->
<button class="prevBtn">< 이전</button>
<button class="nextBtn">> 다음</button>
</div>
<div class="pic">
<div><img alt="1번째 사진" src="images/1.png"></div>
<div><img alt="2번째 사진" src="images/2.png"></div>
<div><img alt="3번째 사진" src="images/3.png"></div>
<div><img alt="4번째 사진" src="images/4.png"></div>
</div>
</div>
</body>
</html>'개발자노트 > 웹' 카테고리의 다른 글
| HTML - jQuery를 이용한 toggleClass("on") 예제 (0) | 2022.07.28 |
|---|---|
| HTML - 마우스 이벤트 (0) | 2022.07.27 |
| HTML - 아코디언 메뉴 예제 (0) | 2022.07.27 |
| HTML - jQuery 라이브러리 연결 방법 2가지 ( 직접연결 , CDN ) (0) | 2022.07.27 |
| HTML - 주사위게임 ( setTimeout 사용 ) (0) | 2022.07.27 |
