jquery.ulslide.js 2번째 , 마우스훨을 이용한 이미지 이동

쉽게 적용할 수 있는 제이쿼리 찾다가 너무 유용하여.. 2번째 팁을 올려요.

마우스 훨을 이용하여 이미지를 이동 시키는 법이에요.

참.. 제이쿼리 대단하네요

배너 위에 마우스 휠을 굴리면 바로 앞, 뒷 장면으로 넘길 수 있습니다.
마우스를 올리지 않은 상태에선 자동으로 다음장면으로 넘어갑니다.
첨부파일에 소스가 있으니 다운받아 열어보시기 바랍니다.

<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.ulslide.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>

1. 첨부파일을 열면 head영역에 마우스휠 슬라이드 배너를 구현시키기 위해 필요한
제이쿼리 플러그인들이 불러와져 있습니다. 경로에 나와있듯이 플러그인들은
js폴더안에 모두 들어 있으니 다른곳에서 활용하실 때 꼭 함께 챙겨가시기 바랍니다.

<script type="text/javascript">
$(function() {
  $('#main_bn').ulslide({        
    statusbar: true,
    width: 450,                  // 슬라이드 배너의 가로크기 조절
    height: 250,                 // 슬라이드 배너의 세로크기 조절
    affect: 'slide',               // fade로 변경시 서서히 사라지고 나타나는 형태로 바뀜
    axis: 'x',                       // y로 변경시 세로슬라이드로 바뀜
    mousewheel: true,       // 마우스 휠 사용여부 (true, false)
    duration: 400,              // 배너 바뀌는 속도
    autoslide: 3000            // 배너 바뀌는 딜레이 조절
  });
});
</script>

2. head 영역에 있는 제이쿼리 소스입니다. 각 부분의 설명은 위와같고
mousewheel부분을 통해 마우스 휠 사용유무를 제어 할 수 있습니다.

<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>
</div>
3. body영역의 html 소스입니다. <li></li>한 묶음당 한장면입니다.
한묶음을 추가하거나 빼서 장면수를 조절 할 수 있습니다.
 
<style type="text/css">
  #main_bn{
       border:5px solid #000;     // 배너 테두리 굵기와 색상
   }
  #main_bn li {
       width:450px;    // 배너 속 틀의 가로 크기
       height:250px;    // 배너 속 틀의 세로 크기
   }
  #main_bn img{
       width:100%;      // 이미지가 틀안에 가로 100% 꽉차도록
       height:100%;    // 이미지가 틀안에 세로 100% 꽉차도록
   }
</style>
4. head영역의 CSS 소스입니다. 각 장면의 틀과 이미지들의 크기를 제어할 수 있습니다.