티스토리 뷰

웹디자인

배경이미지 슬라이드 (페이드 인/아웃)

깽아네 2018. 10. 11. 13:57
728x90

 

 

이런느낌으로 이미지가 부드럽게 사라지고 나타나는 페이지를 작업하고자 한다.

 

1. <head></head> 사이에 추가한다.

 

  1. <script>

  2. $("#slideshow > div:gt(0)").hide();

  3. setInterval(function() { 

  4.  $('#slideshow > div:first')

  5.   .fadeOut(1000)

  6.   .next()

  7.   .fadeIn(1000)

  8.   .end()

  9.   .appendTo('#slideshow');

  10. },  3000);

  11. </script>

 

//여기서 숫자는 넘어가는 시간을 나타낸다.

 

 

 

2. css추가

 

 

  1. #slideshow { 

  2.  margin: 0 auto; 

  3.  position: relative; 

  4.  width: 100%; 

  5.  height: 634; 

  6.  padding: 0; 

  7.  box-shadow: 0 0 20px rgba(0,0,0,0.4);

  8. }

  9.  

  10. #slideshow > div { 

  11.  position: absolute;

  12. }

 

 

3. body에 입력

 

 

  1. <div id="slideshow">

  2.   <div><img src="이미지경로"></div>

  3.   <div><img src="이미지경로"></div>

  4. </div>

 

// 이미지 갯수 추가나 삭제 가능




728x90
저작자표시 비영리 동일조건

'웹디자인' 카테고리의 다른 글

absolute 가운데 정렬하는 css  (0) 2018.12.06
마우스 오버시 이미지 확대 css팁  (0) 2018.11.29
드롭다운메뉴 마우스오버시 하위메뉴 다운 (css적용)  (0) 2018.11.13
레이어팝업시 배경은 어둡게하기  (0) 2018.10.11
파비콘 만들어 홈페이지 적용하기  (0) 2018.10.10