jQuery를 이용한 메인이미지 변경 효과 - animate, fade효과

jQuery 를 이용해서 메인 이미지의 페이드 효과를 주면서 변경해보는 효과를 만들어 보았습니다.

ul li 형식에 각 li 에는 클래스 이름으로 지정되어있고 그 클래스에 배경이미지로 잡혀있는 경우입니다.

 

우선 html 소스코드를 보면은

 

    <h2>메인이미지</h2>
      <div id="mainimg">
        <ul>
          <li class="mainimgview01">
              <div class="viewclose">
                  <p class="close"><a href="#close" title="클릭시 이미지 닫기" class="mainimgCloseBtn"><img src="img/main/spacer.gif" width="30" height="30" alt="닫기" /></a></p>
              </div>
          </li>
          <li class="mainimgview02" style="display:none">
              <div class="viewclose">
                  <p class="close"><a href="#close" title="클릭시 이미지 닫기" class="mainimgCloseBtn"><img src="img/main/spacer.gif" width="30" height="30" alt="닫기" /></a></p>
              </div>
          </li>
          <li class="mainimgview03" style="display:none">
              <div class="viewclose">
                  <p class="close"><a href="#close" title="클릭시 이미지 닫기" class="mainimgCloseBtn"><img src="img/main/spacer.gif" width="30" height="30" alt="닫기" /></a></p>
              </div>
          </li>
        </ul>
      </div>

 

위와 같습니다. 보시는 것과 같이 각 li 에 클래스 이름이 있고 mainimgview라는 이름과 넘버로 이루어져 있습니다.

 

그럼 위의 클래스는 스타일시트 즉 css 에 어떻게 적용이 되어있는가를 보면 아래와 같습니다.

#mainimg                                                { position:absolute;left:0;top:147px; width:100%; height:727px; z-index:99; }
#mainimg      .mainimgview01                              { position:relative; float:left; width:100%; height:727px; margin:0 auto;text-align:left;z-index:99; background:url(../img/main/img01.jpg) bottom center no-repeat;}
#mainimg      .mainimgview01    .viewclose                { width:1020px;margin:0 auto;text-align:left;}
#mainimg      .mainimgview01    .viewclose  .close        { position:relative; float:right; padding:34px 0 0 0;}
#mainimg      .mainimgview02                              { position:absolute; float:left; width:100%; height:727px; margin:0 auto;text-align:left;z-index:99; background:url(../img/main/img02.jpg) bottom center no-repeat;}
#mainimg      .mainimgview02    .viewclose                { width:1020px;margin:0 auto;text-align:left;}
#mainimg      .mainimgview02    .viewclose  .close        { position:relative; float:right; padding:34px 0 0 0;}
#mainimg      .mainimgview03                              { position:absolute; float:left; width:100%; height:727px; margin:0 auto;text-align:left;z-index:99; background:url(../img/main/img03.jpg) bottom center no-repeat;}
#mainimg      .mainimgview03    .viewclose                { width:1020px;margin:0 auto;text-align:left;}
#mainimg      .mainimgview03    .viewclose  .close        { position:relative; float:right; padding:34px 0 0 0;}

 

위의 코드와 같이 각 클래스는 백그라운드로 이미지를 참조하고 있습니다. 이렇게 클래스 이름으로 백그라운드를 적용하면 html 코드 수정없이 css 에서만 바꾸어 주면 된다는 장점이 있습니다.

 

이제는 jQuery 소스 코드를 보면 아래와 같습니다.

 

jQuery(function($){

 var mainimg = $('#mainimg');
 var index=1;
 var preindex = 0;
 var is_mainimg_on = true;

 
 
 mainimg.find('.mainimgCloseBtn').click(function(){
  is_mainimg_on = false;
  $(this).parents('li:first').css('display', 'none');
 });

 

 var limit=mainimg.find('ul>li').size();
 mainimg.find('ul>li').css('display','none').css('opacity', '0');
 mainimg.find('ul>li:first').css('display', 'block').css('opacity', '1');

 

 function timerAction_mainimg(){

  preindex = index;

  if(index >= limit)
   index=1;
  else
   index++;

  if(is_mainimg_on)
   mainimg_effect(preindex-1, index-1);

  
 }

 function mainimg_effect(preindex, index){
  //alert(preindex+', '+index);

  mainimg.find('ul>li:eq('+preindex+')').animate({
   opacity:'0'
  }, 1000, function(){

  });

  mainimg.find('ul>li:eq('+index+')').css('display', 'block').animate({
   opacity:'1'
  }, 1000, function(){

  });

 }

 var timer = window.setInterval(timerAction_mainimg, 5000);

});

 

위의 코드를 보면 timer 변수로 5000 즉 5초 단위로 timerAction_mainimg 라는 함수를 호출하도록 했습니다. 그렇다면 timerAction_mainimg 함수는 무엇을 하는 함수 이냐면 바로 인덱스 처리를 하는 함수 입니다. 왜냐하면 이전 배경과 다음에 나올 이미지 배경이 페이드 효과로 교차해야하기 때문에 인덱스 조건 처리를 하였습니다. 그리고 그 인덱스에 따라서 mainimg_effect 함수를 호출해서 이전 이미지는 서서히 사라지고 다음 이미지는 천천히 보여지게 하는 효과를 에니메이션 하게 됩니다.

 

소스 코드는 첨부파일로 첨부하였습니다.

단 css 와 jQuery 를 실행하는 상단에 포함해야하는 코드는 집어 넣으시고 배경 이미지도 경로에 맞게 수정하셔야 정상적으로 동작하게 됩니다.

 

혹시 도움이 될까봐 작업중이던 소스 코드를 가져와 여기에 올려봅니다.

 

 

main.css

 

main.html

 

main_effect.js