코드펜 https://codepen.io/gamza/pen/QgaRqY?editors=1111
▣ 구상
- 시간의 흐름에 따라 이미지들을 번갈아 보여줍니다.
▣ 조건
➊ 컨텐츠의 fadeIn & fadeOut
➋ 순환
▣ 준비
· 컨텐츠에 들어갈 이미지 3장 ( 600px * 350px )
◆ 레이아웃 ( html, css )
1. 내용물을 감싸는 div.wrap 을 추가합니다.
2. viewport 가 될 div.fade_container 를 추가합니다.
3. 실제로 fade 시킬 <img> 를 3개 추가합니다.
4. 하나의 viewport 에 모두 들어가도록 <img> 를 position : absolute 시킵니다.
● html
1 2 3 4 5 6 7 | <div id="wrap"> <div class="fade_container"> <img class="active" src="slide1.jpg" alt="image1" /> <img src="slide2.jpg" alt="image2" /> <img src="slide3.jpg" alt="image3" /> </div></div> |
● css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | body { background-color:#111;}#wrap{ margin:30px auto; width:600px;}.fade_container { width:600px; height:350px; border:2px solid gold; }.fade_container img{position:absolute;}.fade_container .active{ z-index:1;} |
◆ 기능 ( jquery )
초기 : 0째 이미지에 z-index 값을 주어 화면에 우선 노출시킵니다.
1. 1번째 이미지에 z-index 값을 주어 fadeIn 시킵니다. ( 자연히 "0번째 이미지" 의 fadeOut )
2. 0번째 이미지를 숨깁니다.
3. 애니메이션을 마친 후 0째 이미지를 뒤로 보내고, ( 자연히 "1번째 이미지" 는 "0번째 이미지" 가 됩니다. )
4. z-index 를 값을 삭제합니다.
5. 1~4 번을 순환시킵니다.
6. 컨텐츠에 마우스를 올려놓으면 애니메이션이 멈추고,
마우스가 떠나면 애니메이션이 다시 시작하도록 합니다.
● javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | // 로직/* 0번째 이미지는 css 에서 설정한 active 클래스로 인해 z-index 가 "1"인 상태 1번째 이미지가 .addClass() 로 인해 z-index 값이 "1"로 동률이 되고 1번째 이미지는 .css() 로 투명한 상태. 1번째 이미지가 .animate() 로 1초동안 불투명도값이 1이 된다. (fade 기능) 0번째 이미지는 부모요소에 .append() 되어 부모의 마지막요소로 바뀌어 인덱스값이 "2"가 되고, 1번째 이미지는 자동으로 0번째 이미지가 된다. .append() 된 요소는 .removeClass() 로 z-index 값이 "0"이 된다. */var now_img, next_img; function fade_change(){ now_img = $(".fade_container img:eq(0)"); next_img = $(".fade_container img:eq(1)"); next_img.addClass("active").css("opacity",0).animate({"opacity":1},1000, function(){ $(".fade_container").append(now_img); //콜백 now_img.removeClass("active"); }); } // 순환 /* fade_change() 함수를 순환시키는 timer 설정 mouse hover 로 애니메이션 멈춤/재생 */ var timer = setInterval("fade_change()", 4000); $("div.fade_container").hover(function(){ // mouse enter 시 clearInterval(timer); }, function(){ // mouse leave 시 timer = setInterval("fade_change()",4000); }); |
