728x90
반응형
페이드 인 & 페이드 아웃
html 골격 만들어주기
css 편집
각 태그별 영역 잡아주기
html > 배너 이미지 넣기
ul에 class="list" class 를 지정해줘야한다.
li에 class="list_img"를 지정해준다.
css > banner 편집
슬라이드 배너 3장 한 위치에 겹쳐주기
fadeout / fadein 효과 주기
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지슬라이드 효과3</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container">
<article class="header"></article>
</div>
</div>
<section id="banner">
<div class="container">
<article class="banner">
<h2>이미지슬라이드 효과주기</h2>
<ul class="list">
<li class="list_img">
<img src="./img/banner1.png" alt="배너이미지01">
</li>
<li class="list_img">
<img src="./img/banner2.png" alt="배너이미지02">
</li>
<li class="list_img">
<img src="./img/banner3.png" alt="배너이미지03">
</li>
</ul>
</article>
</div>
</section>
<section id="contents">
<div class="container">
<article class="contents"></article>
</div>
</section>
<div id="footer">
<div class="container">
<article class="footer"></article>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// fadein & fadeout
$(".banner > ul > li").hide();
// li를 숨겨줘라
$(".banner > ul > li:first-child").show();
// 첫번째 아이를 보여줘라
setInterval(function(){
$(".banner > ul > li:first-child").fadeOut(500).next().fadeIn(500).
// 첫번째 아이를 선택해서 서서히 없애고 다음 아이를 서서히 보여줘라
end(1000).appendTo(".banner > ul");
// end(1000)> 지금 선택된 아이 (두번째 배너) 전 배너(첫번째배너)를 선택해서 appenTo로 세번쨰 배너 아래에 끼워 넣어줘라
},3000);
</script>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
.clearfix::after,
.clearfix::before{
content: "";
display: block;
clear: both;
}
img{
display: block;
}
#wrap{}
#header{
background-color: lightblue;
height: 100px;
}
#banner{}
#contents{
background-color: lightcoral;
height: 200px;
}
#footer{
background-color: lightgray;
height: 100px;
}
.container{
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
.banner{
width: 1200px;
height: 500px;
/* overflow: hidden; */
/* h2 기준 잡아주기 */
position:relative
}
.banner h2{
/* 위치 잡아주기 */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
/* 폰트 편집 */
color: #fff;
font-size: 50px;
text-shadow: 5px 5px 5px #222;
z-index: 10;
}
.banner .list{
width: 1200px;
height: 500px;
/* 기준점 */
position: relative;
}
.banner .list .list_img{
width: 1200px;
height: 500px;
position: absolute;
left: 0;
top: 0;
}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVASCRIPT] 1. 기초 (0) | 2023.06.19 |
|---|---|
| 비주얼 스튜디오 코드 38_ 웹표준) menu (0) | 2023.06.19 |
| 비주얼 스튜디오 코드 36_ 웹표준) header (0) | 2023.06.16 |
| 비주얼 스튜디오 코드 _ 35 로딩 애니메이션 (0) | 2023.06.16 |
| 비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제 (0) | 2023.06.15 |