이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기

이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기

CSS

<style>

.dot_list li a{ font-style: normal; font-size:28px; color:#000; text-decoration: none;}

.dot_list li.on a{ color:red;}

.btn_list li a{ text-decoration: none; color:#000; }

</style>

HTML

<div id="wrap">

<ul class="dot_list">

<li class="on"><a href="javascript:;">1</a></li>

<li><a href="javascript:;">2</a></li>

<li><a href="javascript:;">3</a></li>

</ul>

<ul class="btn_list">

<li><a href="javascript:;" class="btn_prev">이전버튼</a></li>

<li><a href="javascript:;" class="btn_next">다음버튼</a></li>

</ul>

</div>

JAVASCRIPT

<script>

var dotList = $( ".dot_list" ).children( "li" );

var btnPrev = $( ".btn_prev" );

var btnNext = $( ".btn_next" );

var _myIndexNumber = 0;

btnPrev.on("click", function( $e ){

_myIndexNumber--;

myIndexFind( _myIndexNumber );

});

btnNext.on("click", function( $e ){

_myIndexNumber++;

myIndexFind( _myIndexNumber );

});

function myIndexFind( $index )

{

var max = dotList.length - 1; //li 갯수 일치하게 만들기

if( $index > max )                            

{

_myIndexNumber = 0;

}else if( $index < 0 ){

_myIndexNumber = max;

}

dotList.eq( _myIndexNumber ).addClass( "on" ).siblings( "li" ).removeClass( "on" );

}

</script>