<style type="text/css">
.css_test {
height : 400px;
margin-top : 10px;
margin : 0 auto;
overflow : hidden;
white-space : nowrap; /* 줄바꿈 금지(이미지를 한줄로) */
width : 550px;
}
</style>
아래 버튼을 마구 눌러보세요!<br>
<button type="button"
onclick="j_test(-50)">왼쪽으로 스크롤</button>
<button type="button"
onclick="j_test(50)">오른쪽으로 스크롤</button><br><br>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/276CD538550B923A07" />
<img src="https://t1.daumcdn.net/cfile/tistory/232B204B550B9B3932" />
<img src="https://t1.daumcdn.net/cfile/tistory/251EF04B550B9B3A39" />
<img src="https://t1.daumcdn.net/cfile/tistory/216F4139550B923E33" />
<img src="https://t1.daumcdn.net/cfile/tistory/2275BF38550B92383D" />
</div>
<script type="text/javascript">
function j_test(n){
$('.css_test')
.scrollLeft( $('.css_test')
.scrollLeft() + n );
}
</script>