728x90
반응형
html 골격만들기
ul에 class="list"
li에 class="list_img" 클래스 지정해주기
css 스타일 넣어주기
- 제이쿼리 스니펫 body에 붙여넣기
- 변수- 이름지정해주기
// 배너 이미지슬라이드
const banner = $(".banner");
const list = $(".banner > .list");
const listImg = $(".banner > .list > .list_img")
// setInterval(function(){},3000);
// 3초마다 function(){}를 불러와서 실행시키라는 명령어-애니메이션 넣어주기
// setInterval(function(){},3000);
// 3초마다 function(){}를 불러와서 실행시키라는 명령어
setInterval(function(){
list.animate({top:"-500px"}, 200, function(){
$(".list_img:first-child").appendTo(list);
list.css("top","0");
});
},3000);
// list.animate({top:"-500px"}, 200)
// list값을 위쪽방향으로 500px만큼 움직이는데 0.2초시간이 걸리도록하라.
// $(".list_img:first-child").appendTo(list);
// 첫번째리스트이미지를 잘라서 . 첫번째리스트를 리스트의 마지막 박스안에 추가시켜줘라
// list.css("top","0");
// 리스트의 공간을 top0값으로 가게 하라.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상하이미지 이동하는 슬라이드</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container">
<div class="header"></div>
</div>
</div>
<section id="banner">
<div class="container">
<div class="banner">
<h2>이미지 상하슬라이드</h2>
<ul class="list">
<li class="list_img"><img src="./img/img01.png" alt="배너이미지01"></li>
<li class="list_img"><img src="./img/img02.png" alt="배너이미지02"></li>
<li class="list_img"><img src="./img/img03.png" alt="배너이미지03"></li>
</ul>
</div>
</div>
</section>
<section id="contents">
<div class="container">
<div class="contents"></div>
</div>
</section>
<div id="footer">
<div class="container">
<div class="footer"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// 배너 이미지슬라이드
const banner = $(".banner");
const list = $(".banner > .list");
const listImg = $(".banner > .list > .list_img")
// setInterval(function(){},3000);
// 3초마다 function(){}를 불러와서 실행시키라는 명령어
setInterval(function(){
list.animate({top:"-500px"}, 200, function(){
$(".list_img:first-child").appendTo(list);
list.css("top","0");
});
},3000);
// list.animate({top:"-500px"}, 200)
// list값을 위쪽방향으로 500px만큼 움직이는데 0.2초시간이 걸리도록하라.
// $(".list_img:first-child").appendTo(list);
// 첫번째리스트이미지를 잘라서 . 첫번째리스트를 리스트의 마지막 박스안에 추가시켜줘라
// list.css("top","0");
// 리스트의 첫번째 비어진 공간에 top0값으로 가게 하라.
</script>
</body>
</html>css
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
color: #222;
text-decoration: none;
}
li{
list-style: none;
}
.clearfix::before,
.clearfix::after{
clear:both;
content: "";
display: block;
}
img{
display: block;
/* 이미지가 인라인 구조라서 이미지 사이에 여백이 생기기 때문에 블럭구조로 바꿔줌 */
}
#wrap{}
#header{}
#banner{}
#contents{}
#footer{}
/* container */
.container{
width: 1200px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
.header{
height: 100px;
background-color: lightsalmon;
}
.banner{
position: relative;
/*이미지 한장만 보이게하기*/
width: 1200px;
height: 500px;
overflow: hidden;
}
.banner h2{
position: absolute;
background-color: rgba(255,255,255,0.6);
font-size: 24px;
padding: 20px;
top: 10px;
left: 10px;
}
.banner .list{
width: 1200px;
height: 1500px;
/* 이미지를 공중에 띄워놓아야함 */
position: relative;
/* .list가 움직여야지 슬라이드가 올라감 */
}
.banner .list .list_img{
width: 1200px;
height: 500px;
}
.banner .list .list_img img{
/* width: 100%; */
}
.contents{
height: 200px;
background-color: lightgray;
}
.footer{
height: 100px;
background-color: lightskyblue;
}예제2
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤ (0) | 2023.06.14 |
|---|---|
| 비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습 (0) | 2023.06.14 |
| 비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형 (0) | 2023.06.13 |
| 비주얼 스튜디오 코드 26 _ 마우스오버 효과④ (0) | 2023.06.13 |
| 비주얼 스튜디오 코드 25_ 탭 메뉴 ② (1) | 2023.06.12 |