▶ jQuery - 1/4페이지 ( 좌,우 버튼으로 페이지 이동 처리 ) > JQUERY

• 목록

<style>

* {

margin: 0;

padding: 0;

}

body {

font-family: "굴림", sans-serif;

font-size: 12px;

}

button{

cursor:pointer;

}

#wrap {

width: 200px;

margin: 20px auto;

}

#wrap .page {

text-align: right;

margin-bottom: 5px;

}

#wrap .page .page_n {

display: inline-block;

margin-right: 10px;

}

#wrap .page button {

border: none;

background: #666;

color: #fff;

width: 20px;

height: 20px;

line-height: 1.5;

overflow: hidden;

}

#wrap .vis {

width: 200px;

height: 200px;

border: 2px solid #505900;

overflow: hidden;

}

</style>

<script>

$(document).ready(function() {

var totalNum = $(".vis > div").length // 4

var currentNum = 1;

$(".page_n > span:first").text(currentNum);

$(".page_n > span:last").text(totalNum);

$(".next_b").click(function() {

currentNum++;

if (currentNum > totalNum) {

currentNum = 1;

}

$(".vis div:first").insertAfter(".vis div:last");

$(".page_n > span:first").text(currentNum);

});

$(".prev_b").click(function() {

currentNum--;

if (currentNum < 1) {

currentNum = totalNum;

}

$(".vis div:last").insertBefore(".vis div:first");

$(".page_n > span:first").text(currentNum);

});

});

</script>

<div id="wrap">

<div class="page">

<span class="page_n">

<span></span> / <span></span>

</span>

<button class="prev_b">&lt; 이전</button>

<button class="next_b">&gt; 다음</button>

</div>

<div class="vis">

<div><a href="#"><img src="1.jpg" alt="HTML"></a></div>

<div><a href="#"><img src="2.jpg" alt="CSS"></a></div>

<div><a href="#"><img src="3.jpg" alt="Javascript"></a></div>

<div><a href="#"><img src="4.jpg" alt="jQuery"></a></div>

</div>

</div>

[실행결과]