웹디자인
배경이미지 슬라이드 (페이드 인/아웃)
깽아네
2018. 10. 11. 13:57
728x90
이런느낌으로 이미지가 부드럽게 사라지고 나타나는 페이지를 작업하고자 한다.
1. <head></head> 사이에 추가한다.
-
<script>
-
$("#slideshow > div:gt(0)").hide();
-
setInterval(function() {
-
$('#slideshow > div:first')
-
.fadeOut(1000)
-
.next()
-
.fadeIn(1000)
-
.end()
-
.appendTo('#slideshow');
-
}, 3000);
-
</script>
//여기서 숫자는 넘어가는 시간을 나타낸다.
2. css추가
-
#slideshow {
-
margin: 0 auto;
-
position: relative;
-
width: 100%;
-
height: 634;
-
padding: 0;
-
box-shadow: 0 0 20px rgba(0,0,0,0.4);
-
}
-
-
#slideshow > div {
-
position: absolute;
-
}
3. body에 입력
-
<div id="slideshow">
-
<div><img src="이미지경로"></div>
-
<div><img src="이미지경로"></div>
-
</div>
// 이미지 갯수 추가나 삭제 가능
728x90