수라의 티스토리

[좌우]
<script type="text/javascript">
var pagging = 0;
$(document).ready(function() {
    var contWidth = $('.thumList').width();
    var cnum = ($('.slide > div').size())-1;
    var slideLeft = 0 - contWidth;
    $('.slide').css('width',contWidth*(cnum+1));
    $('.btnLeft').click(function() {
        pagging--;
        if (pagging < 0) {pagging = 0; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
    $('.btnRight').click(function() {
        pagging++;
        var max=cnum;
        if(pagging > max) {pagging = max; };
        $('.magazineTitle img').attr('src', '../images/whatissue/title_magazine0'+pagging+'.gif');
        $('.slide').animate({marginLeft: slideLeft*pagging});
    });
});
</script>

<div class="container">
    <div class="slide clfix">
        <!-- contents01 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents01 -->
        <!-- contents02 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents02 -->
        <!-- contents03 -->
        <div class="thumList cont1">
        </div>
        <!-- //contents03 -->
    </div>
</div>

[상하] (페이징이 추가되고, 소스만 조금 다를뿐 방식은 위와 동일)
<script type="text/javascript">
var page = 1;    //시작페이지 카운트
var slideNum = 3;    //슬라이드 갯수

function pagging(num){
    var $slide = $('.slide');    //슬라이드할 class
    var $pagging = $('.pagging a');    //페이징 class
    var slideHeight = 0 - ($('.slide > ol').height());    //슬라이드에 필요한 수치값
    page = num;
    listTop = slideHeight * (num-1);
    $slide.animate({marginTop:listTop}, {duration:500});
    $pagging.removeClass('on');
    $pagging.eq(num).addClass('on');
}

$(document).ready(function() {
    $(".left").click(function(){
        page--;
        if (page < 1) {page = 1; };
        pagging(page);
        return false;
    });
    $(".right").click(function(){
        page++;
        var max=slideNum;
        if(page > max) {page = max; };
        pagging(page);
        return false;
    });
});

<div class="area">
    <div class="slide clfix">
        <ol>
            <li onclick="link(1);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(11);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
        <ol>
            <li onclick="link(21);return false;"><img src="img/tab01_on.gif" alt="" /></li>
        </ol>
    </div>
</div>

[HTML]
<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

[CSS]
<style type="text/css" media="screen">
  .slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }
</style>

[SCRIPT]
<script>
  $(function(){
    $("#slides").slides();
  });
</script>


출처 : http://slidesjs.com/