<style type="text/css">
.css_test {
height : 420px;
margin-top : 10px;
margin : 0 auto;
overflow : hidden;
text-align : center;
width : 600px;
}
.css_test div {
background : #000;
display : none;
height : 420px;
position : absolute;
width : 600px;
}
.css_test img {
display : none;
width : 100%;
}
</style>
<button type="button"
onclick="j_test()">눌 러 보 세 용 데 헷</button>
<div class="css_test">
<div></div>
<img src="https://t1.daumcdn.net/cfile/tistory/26138D4854D7351522" style="display:inline-block;" />
<img src="https://t1.daumcdn.net/cfile/tistory/2408093354D74FB106" />
<img src="https://t1.daumcdn.net/cfile/tistory/24604B4B550B9B3718" />
<img src="https://t1.daumcdn.net/cfile/tistory/2509693354D74FB503" />
<img src="https://t1.daumcdn.net/cfile/tistory/217ADA3954D74FB622" />
<img src="https://t1.daumcdn.net/cfile/tistory/210A014854D735142C" />
<img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" />
<img src="https://t1.daumcdn.net/cfile/tistory/276CD538550B923A07" />
<img src="https://t1.daumcdn.net/cfile/tistory/236C4F3354D74FB232" />
<img src="https://t1.daumcdn.net/cfile/tistory/21714438550B923B42" />
</div>
효과음 : 입으로 찰칵~ 찰칵~
<script type="text/javascript">
function j_test(){
$('.css_test div').slideDown(100, function(){
$('.css_test').append($('.css_test img:visible').remove());
$('.css_test img:first').show();
$('.css_test img:last').hide();
})
.delay(500).slideUp(100);
}
</script>