[웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임5-2 (이미지슬라이드 페이드 인, 아웃)

[큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고]

 

<공지사항, 갤러리 세부 구조>

 

+) 이미지는 3초마다 자동 fadeIn, fadeOut 효과(순환)

+) 이미지와 함께 바뀌는 Text 

http://doqtqu.tistory.com/31?category=795688 와 이미지 슬라이드 부분만 차이가 있습니다.

 

위 게시글의 index.html 부분의 slide class 부분의 소스코드를 아래 코드와 같이 수정한 후, 

<li class="first" >
	<img src="http://doqtqu.dothome.co.kr/images/imgSlideBtn/images(1).jpg" alt="">
</li>
<li class="second">
	<img  src="http://doqtqu.dothome.co.kr/images/imgSlideBtn/images(2).jpg" alt="">
</li>
<li class="third">
	<img src="http://doqtqu.dothome.co.kr/images/imgSlideBtn/images(3).jpg" alt="">
</li>

script.js에서 Slide 함수부분을 아래 코드와 같이 수정해주면됩니다.

function Slide() {
  idx = idx + 1;
  i = (idx - 1) % 3; // 이미지 개수로 나누기(순환)
  if (i == 0) {
    i = 3;
  }
  switch ((idx + 1) % 3) {
    case 1:
    // 첫 번째 텍스트 제외하고 다 가리기
    $(".text3").fadeOut(function(){
        $(".text1").fadeIn();
        $(".text2").fadeOut();
    });
   // 세 번째 이미지 fadeOut 후, 첫 번째 이미지 fadeIn 두 번째 이미지 fadeOut
    $(".third").fadeOut(function(){
    	$(".first").fadeIn();
      $(".second").fadeOut();
    });
      break;
    case 2:
    // 두 번째 텍스트 제외하고 다 가리기
    $(".text1").fadeOut(function(){
        $(".text2").fadeIn();
        $(".text3").fadeOut();
    });
   // 첫 번째 이미지 fadeOut 후, 두 번째 이미지 fadeIn 세 번째 이미지 fadeOut
    $(".first").fadeOut(function(){
    	$(".second").fadeIn();
      $(".third").fadeOut();
    });
      break;
    default:
      // 세 번째 텍스트 제외하고 다 가리기
    $(".text2").fadeOut(function(){
        $(".text3").fadeIn();
        $(".text1").fadeOut();
    });
   // 두 번째 이미지 fadeOut 후, 세 번째 이미지 fadeIn 첫 번째 이미지 fadeOut
    $(".second").fadeOut(function(){
    	$(".third").fadeIn();
      $(".first").fadeOut();
    });
      break;
  }

}