배너 슬라이드

<script type="text/javascript"> $(function() { $('#main_bn').ulslide({ statusbar: true, width: 450, height: 338, affect: 'slide', axis: 'x', navigator: '#main_bn_btn a', duration: 400, autoslide: 3000 }); }); </script> <style type="text/css"> #wrap{position:relative; width:100%;} #main_bn { margin:0 auto; width:450px; height:338px; } #main_bn img { width:100%; height:auto; } #main_bn_btn { list-style-type:none; position:absolute; bottom:5px; left:5px; } #main_bn_btn li { float: left; padding:0px 2px; margin-right:5px; } a, a:hover, a:visited { text-decoration:none; } ul li { list-style : none; } </style> <div id="wrap"> <div id="main_bn"> <li> <img src="./img/image_1.jpg" alt="" /> </li> <li> <img src="./img/image_2.jpg" alt="" /> </li> <li> <img src="./img/image_3.jpg" alt="" /> </li> <div id="main_bn_btn"> <li><a href="#"><img src="./img/blt.png"></a></li> <li><a href="#"><img src="./img/blt.png"></a></li> <li><a href="#"><img src="./img/blt.png"></a></li> </div> </div> </div>

출처 : http://woodstar.tistory.com/53