jquery image slider

jquery image slider

HTML

<div id="gallery">

<h1>동해안 갤러리</h1>

<p id="photo">

<img src="image/pc/pic_1.jpg" width="320" alt="" />

</p>

<div id="photo_list">

<ul class="slide_box">

<li><a href="image/pc/pic_1.jpg">

<img src="image/pc/pic_t1.jpg" alt="사진1" /></a></li>

<li><a href="image/pc/pic_2.jpg">

<img src="image/pc/pic_t2.jpg" alt="사진2" /></a></li>

<li><a href="image/pc/pic_3.jpg">

<img src="image/pc/pic_t3.jpg" alt="사진3" /></a></li>

<li><a href="image/pc/pic_4.jpg">

<img src="image/pc/pic_t4.jpg" alt="사진4" /></a></li>

<li><a href="image/pc/pic_5.jpg">

<img src="image/pc/pic_t5.jpg" alt="사진5" /></a></li>

<li><a href="image/pc/pic_6.jpg">

<img src="image/pc/pic_t6.jpg" alt="사진6" /></a></li>

<li><a href="image/pc/pic_7.jpg">

<img src="image/pc/pic_t7.jpg" alt="사진7" /></a></li>

<li><a href="image/pc/pic_8.jpg">

<img src="image/pc/pic_t8.jpg" alt="사진8" /></a></li>

</ul>

</div>

<p class="btn_wrap">

<a href="#" id="before_btn">&lt;</a>

<a href="#" id="next_btn">&gt;</a>

</p>

</div>

CSS

<style type="text/css">

*{margin:0;padding:0;}

li{list-style:none;}

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

#gallery{width:350px;margin:30px auto;

border:1px solid #999;

box-shadow:0 5px 5px rgba(0, 0, 0, 0.3);}

#gallery h1{text-align:center;}

#gallery img{border:1px solid #666;}

#photo{text-align:center;}

#gallery ul{width:800px;margin:0 auto;

overflow:hidden;}

#photo_list ul li{width:100px;float:left;text-align:center;}

#photo_list{width:300px;margin:10px auto;

/*border:1px dashed #000;*/overflow:hidden;}

.btn_wrap{text-align:center;}

.btn_wrap a{font-weight:bold;}

</style>

SCRIPT

<script type="text/javascript">

var _w = $( window );

_w.on( "load", function(){

var _slideBox = $( ".slide_box" );

var _slideList = _slideBox.children( "li" );

var len = _slideList.length;

var _photo = $( "#photo" ).find( "img" );

var _itemWidth = _slideBox.find( "li" ).outerWidth();

var _btnNext = $( "#next_btn" );

var _btnPrev = $( "#before_btn" );

var _count = 0;

//섬네일 클릭 시 index이미지

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

$e.preventDefault();

var index = _slideList.index( this ) + 1;

_photo.attr( "src", "image/pc/pic_" + index + ".jpg" );

});

//다음 버튼 클릭 시

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

$e.preventDefault();

if( _count >= len - 3) return false;

_count ++;

slideMove();

});

//이전 버튼 클릭 시

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

$e.preventDefault();

if( _count <= 0 ) return false;

_count --;

slideMove();

})

//움직이는 함수

function slideMove(){

TweenMax.to( _slideBox, 0.3, { marginLeft : - _itemWidth * _count, ease: Expo.easeOut });

}

})

</script>

예제 샘플

http://ux.adqua.co.kr/ux/ixkfo86/test/slider/slide.html