start , stop 버튼 추가 > 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;

}

img{

width:200px;

}

</style>

<script>

$(document).ready(function() {

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

var currentNum = 1;

var gostop = "go";

$(".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);

});

//go , stop 버튼

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

gostop = "go";

});

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

gostop = "stop";

});

//시간 설정 단위로 자동 실행 처리

setInterval(function() {

if(gostop == "go"){

go_stop();

}

}, 4000); //4초

function go_stop(){

currentNum++;

if (currentNum > totalNum) {

currentNum = 1;

}

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

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

}

});

</script>

<span id="result"></span>

<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>

<button class="go_b">▶ 고우</button>

<button class="stop_b">■ 스탑</button>

</div>

<div class="vis" style="position: relative;">

<div style="position: absolute;"><a href="#"><img src="1.jpg" alt="HTML"></a></div>

<div style="position: absolute;"><a href="#"><img src="2.jpg" alt="CSS"></a></div>

<div style="position: absolute;"><a href="#"><img src="3.jpg" alt="Javascript"></a></div>

<div style="position: absolute;"><a href="#"><img src="4.jpg" alt="jQuery"></a></div>

</div>

</div>

[실행화면]