<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/22366638555ABF491B" style="display:inline-block;" />
<img src="https://t1.daumcdn.net/cfile/tistory/2408473354D74FB606" />
<img src="https://t1.daumcdn.net/cfile/tistory/25469641555AC5000B" />
<img src="https://t1.daumcdn.net/cfile/tistory/2525B538555ABF4726" />
<img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
<img src="https://t1.daumcdn.net/cfile/tistory/263DDC4C550B9B3C0D" />
<img src="https://t1.daumcdn.net/cfile/tistory/27165B4854D735151D" />
<img src="https://t1.daumcdn.net/cfile/tistory/24088C3354D74FB505" />
<img src="https://t1.daumcdn.net/cfile/tistory/232B204B550B9B3932" />
<img src="https://t1.daumcdn.net/cfile/tistory/216CB14B550B9B3812" />
</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>