JavaScript15 [웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임5-2 (이미지슬라이드 페이드 인, 아웃) [큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고] +) 이미지는 3초마다 자동 fadeIn, fadeOut 효과(순환) +) 이미지와 함께 바뀌는 Text http://doqtqu.tistory.com/31?category=795688 와 이미지 슬라이드 부분만 차이가 있습니다. 위 게시글의 index.html 부분의 slide class 부분의 소스코드를 아래 코드와 같이 수정한 후, script.js에서 Slide 함수부분을 아래 코드와 같이 수정해주면됩니다. function Slide() { idx = idx + 1; i = (idx - 1) % 3; // 이미지 개수로 나누기(순환) if (i == 0) { i = 3; } switch ((idx + 1) % 3) { case 1: // 첫 번.. 2018. 11. 30. [웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임5-1 (텍스트 페이드 인, 아웃) [큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고] +) 이미지 3초마다 자동 슬라이드 (순환) +) 이미지와 함께 바뀌는 Text +) Text는 fadeIn, fadeOut 효과 http://doqtqu.tistory.com/31?category=795688 와 Text 효과 부분만 차이가 있습니다. 위 게시글의 script.js에서 switch 부분을 아래 코드와 같이 수정해주면 fadeIn, fadeOut 효과를 줄 수 있는데 이때 주의해야 할 점이 있습니다. switch ((idx + 1) % 3) { case 1: // 첫 번째 텍스트 제외하고 다 가리기 $(".text3").fadeOut(function(){ $(".text1").fadeIn(); $(".text2").fadeOut(); .. 2018. 11. 30. [웹디자인기능사]좌우 슬라이드 배너(button, 순환) [이미지 출처 : 영진닷컴 이기적 엡디자인 기능사 실기] 2018. 9. 1. [웹디자인기능사]좌우 슬라이드 배너(button, 순환X) [이미지 출처 : 영진닷컴 이기적 엡디자인 기능사 실기] 2018. 9. 1. [웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임11 [큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고] 2018. 8. 24. [웹디자인기능사] 슬라이드 메뉴-공개 와이어프레임10 [큐넷 자료실 웹디자인기능사 공개 와이어프레임 참고] 2018. 8. 23. 이전 1 2 3 다음 반응형
