jQuery 란 놈이 있어서 얼마나 다행인지. 요즘엔 그런 생각이 들곤 한다. 어쩌다보니 설계서 부터 막판 구현까지 완벽한 올라운드 플레이 중이다. 좀 슬프다...

이미지 롤링해주는 스크립트 플러그인들이 많기는 한데... 뭔 사용이 그리 복잡한지... 또 원하는 그 형태로 딱 맞는건 하나도 없어서 직접 구현에 나서기로 했다. 그래도 프로그래머로 일한지 좀 되었다고 넘들 만든거보다 스스로 만들어 쓰려는 기특함이...

만들게 될 결과 화면이다.
순서대로 늘여진 그림의 일부를 보여주고 그걸 클릭하면 전체 그림이 보이게 하거나 순서대로 롤링되는 구성이다.

jQuery에 animate 함수와 setTimeout, setInterval 이 세가지가 중요사항이다. 나머지는 내가 필요한 구성을 맞추기 위해서 추가한 것들이니 상황에 맞춰서 구성하면 될 듯 하다. 작업 중인 사이트 코드를 옮기다 보니 jQuery 지정자가 좀 거슬리긴 하지만, 코드를 이해하는데는 크게 무리 없을 것이라고 스스로 생각하며 간단한 설명과 너스레를 보태 본다.

html 과 script , css 세가지면 되고, jQuery 는 기본으로 삽입되었다고 치고... 아래 html 구성과 같이 받은 내용을 근거로 작업을 시작했습니다. 각 id, rel 은 원래 없었고 rollSelected 란 놈도 없었죠...
먼저 div 에 "mailRolling" 이란 id 를 부여합니다. 
li 에 붙어 있는 class="pdl2" 는 padding-left:2px 입니다. 초기 작업시엔 li 엔 id, rel 등이 필요 없었습니다.
더블어 조작할 Css 구성도 아래와 같이 처리합니다. 아래 css 구성에서 div#mailRolling ul li{width:80px;overflow: hidden;} 부분이 있는데 with:80 은 접혀 있는 이미지 크기가 그렇기 때문입니다. 원하는 크기로 바꾸셔도 상관없습니다. overflow:hidden 이 적용되어서 작은 크기로 접힌듯 보일 수 있습니다.
스크립트 부분의 RollingRcount 는 순번을 주기 위해 넣은 값이고 RollingRstatus 는 롤링되는 동안에 클릭등의 이벤트가 발생했을 경우 애니메이션이 겹치지 않도록 상태값을 준것입니다. 지금 다양한 상태에서 클릭이나 기타 등등을 해봤을때 간혹 밀리는 경우가 발생하는데 클릭 이벤트에서 좀더 섬세한 체크를 하면 될 것 같습니다만, 일단 크게 지장이 없기에 그냥 둡니다.
$("#mailRolling ul li.rollSelected").animate({width: '642'}, 400); 첫번째 이미지를 애니매이션 형태로 보이기 위한 부분입니다. 펼쳐진 이미지가 642 라 그 크기를 지정한 것이고 400 은 펼쳐지는 애니메이션의 소요 시간입니다.
setInterval(fn_Rolling,3500); 일단 주기적으로 돌도록 fn_Rolling이란 함수를 3.5초 단위로 돌게 합니다.
$("#mailRolling ul li").click(function(){ 클릭이벤트 처리... jQuery 에서는 항상 주의 깊게 살펴할 부분이 선택자입니다. 특정 아이디 아래, ul 요소 아래, li 모두에게 클릭 이벤트가 연결되는 것입니다. 다시 한번 jQuery 에게 감사...선택자에 대한 처리를 볼때 마다 쏟아나는 감동과 존경심...xPath 처음 배울때도 그랬지만, jQuery 의 선택자는 선택받은게 틀림 없어요.
if(!$(this).hasClass("rollSelected")) 이벤트가 일어 났다면 보여주는, 숨어 있던 이미지를 펴주는 처리를 해야 하는데 내가 이미 펴져 있다면 더 이상 할 일이 없으므로 상태를 확인해 줍니다. 물론 보는 시간을 좀더 늘여주는 센스가 필요한데...(글을 쓰는 지금 사이트에는 수정된 코드가 올라갔지만, 워낙 단순한 코드이므로 알아서 처리하시길).
RollingRstatus = 0; 이벤트 시작했으니 자동으로 도는 녀석은 잠시 쉬게 해야겠죠...
RollingRcount = parseInt($(this).attr("rel")) + 1; 선택받은 넘에게 추가 정보를 받기 위한 꼼수들이 여기서 등장합니다. li 에 추가된 rel 속성이 그 꼼수입니다. 자동으로 돌고 있던 순번을 지정한 순번으로 강제하는 부분입니다. 지금 클릭된 넘이 마치 순서가 되서 보이게되는 것 처럼 처리해 주는 것입니다. +1 한 것은 지금 선택된 것의 다음 순번으로 도는게 시작되게 하려는 것입니다. (처음에 rel 값을 1 크게 주면 귀찮은 점이 없어질 수도 있는데...)
$("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected"); 일단 먼저 펼쳐진 것을 선택하게 합니다. 펼쳐졌는지 여부는 class 를 이용합니다.  rollSelected 값이 있는 것이 펴쳐진 것입니다. 폭을 80 으로 줄이고(지금 구성된 접힌 부분 넓이가 80 입니다.) 0.5 초 시간을 주었습니다. 그리고 새로 펼쳐질 것이 이게 아니 .removeClass() 를 이용하여 rollSelected 는 제거해 줍니다.
$(this).animate({width: '642'}, 500).addClass("rollSelected"); 지금 클릭 이벤트가 일어난 것에 대해서는 폭을 642px 로 늘여 주고 시간은 줄이는 것과 마찬가지로 0.5 초를 주었습니다. 그리고 선택되어 펼쳐졌다는 표시로 .addClass()를 이용해서 rollSelected 를 추가해 줍니다.
setTimeout(function(){RollingRstatus = 1;}, 5800); 일단 클릭으로 선택되었으니 자동으로 돌아가기 전에 약간의 감상의 시간이 필요하겠지요. setTimeout 함수를 이용해서 자동으로 도는걸 허용하도록 RollingRstatus = 1 값을 변경하고 감상의 시간을 위해 처리되는 시간은 5.8초를 주었습니다. 클릭 이벤트가 일어나도 5.8초 후에는 다시 자동으로 도는 것이 유지되도록 합니다. fn_Rolling 함수 부분은 특별한 것이 없이 순번을 이용한 li 의 rel 값을 이용한 select 만 이해하면 스크립트 내용은 크게 바뀔 것이 없습니다..


html 구성

   <div class="visual_box" id="mailRolling">
    <ul>
     <li class="rollSelected" id="mainRolling0" rel="0"><img src="/img/main2/visual_1.gif" /></li>
     <li class="pdl2" id="mainRolling1" rel="1"><img src="/img/main2/visual_2.gif" /></li>
     <li class="pdl2" id="mainRolling2" rel="2"><img src="/img/main2/visual_3.gif" /></li>
     <li class="pdl2" id="mainRolling3" rel="3"><img src="/img/main2/visual_4.gif" /></li>
     <li class="pdl2" id="mainRolling4" rel="4"><img src="/img/main2/visual_5.gif" /></li>
    </ul>
   </div>
CSS 구성
div#mailRolling {}
div#mailRolling ul{}
div#mailRolling ul li{width:80px;overflow: hidden;}
div#mailRolling ul li.rollSelected{}
div#mailRolling ul li img{cursor:pointer;}
스크립트
 var RollingRcount = 1;
 var RollingRstatus = 1;
 jQuery().ready(function ($) {
 
  $("#mailRolling ul li.rollSelected").animate({width: '642'}, 400);

  setInterval(fn_Rolling,3500);
  
  $("#mailRolling ul li").click(function(){
   if(!$(this).hasClass("rollSelected"))
   {
    RollingRstatus = 0;
    RollingRcount = parseInt($(this).attr("rel")) + 1;
    $("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
    
    $(this).animate({width: '642'}, 500).addClass("rollSelected");
    setTimeout(function(){RollingRstatus = 1;}, 5800);
   }
  });
 });

 function fn_Rolling()
 {
  if(RollingRstatus == 1)
  {
   jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
   
   var liNum = RollingRcount % 5;  
   jQuery("#mainRolling"+liNum).animate({width: '642'}, 500).addClass("rollSelected");
   //jQuery("#mailRolling ul li.rollSelected").animate({width: '80'}, 500).removeClass("rollSelected");
 
   RollingRcount += 1;
  }
 }