| 비주얼 스튜디오 코드 31 | 您所在的位置：网站首页 › img/banner04.png › 비주얼 스튜디오 코드 31 |
비주얼 스튜디오 코드 31
|
01 상하 슬라이드
html > 골격 만들어주기
css> reset 하기
css 에 .container / 클래스 태그 style 넣어주기
● 변수 지정 : const / let 으로 이름 지정가능
●setInterval: 일정시간 간격으로 애니메이션을 반복할 수 있다.
// 이미지슬라이드 _ 상하이동
const list = $(".banner > .list");
const listImg = $(".banner > .list > .list_img");
setInterval(function(){
list.animate({top:"-600px"},200,function(){
$(".list_img:first-child").appendTo(list);
// 첫번째 이미지를 잘라서 list에 넣어줘라
list.css("top","0");
});
},3000);
@charset "utf-8";
/* reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
color: #222;
text-decoration: none;
}
img{
display: block;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
clear: both;
}
#wrap{}
#header{}
#banner{}
#contents{}
#footer{}
.container{
width: 1200px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
height: inherit;
}
/* header */
.header{
width: 100%;
/* 생략가능 */
height: 100px;
background-color: lightblue;
}
/* banner */
.banner{
width: 1200px;
height: 600px;
overflow: hidden;
position: relative;
}
.banner h2{
background-color: rgba(255,255,255,0.2);
/* 박스 안쪽 여백 */
padding: 20px;
font-size: 30px;
color: lightgrey;
/* 박스 위치 설정 */
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
/* h2위치 배너이미지 위로 보내기 */
z-index: 10;
}
.banner .list{
width: 1200px;
height: 2400px;
/* ul.list 전체 4장의 배너이미지의 높이값 넣어줘야함 */
position: relative;
}
/* ul의 이름이기 때문에 ul.list 바로 붙여서써줌 > ul태그 생략가능 */
.banner .list li{}
.banner .list .list_img {
width: 1200px;
height: 600px;
}
.banner .list .list_img img{
display: block;
width: 100%;
}
/* contents */
.contents{
width: 100%;
height: 400px;
background-color: lightpink;
}
/* footer */
.footer{
width: 100%;
height: 100px;
background-color: lightcyan;
}
02 좌우 슬라이드
상하 슬라이드와 마찬가지로 html을 똑같이 써준다.
// 이미지 슬라이드 좌우 이동
const banner = $(".banner");
const list = $(".banner > .list");
const listImg = $(".banner > .list > list_img")
setInterval(function(){
list.animate({left:"-1200px"},200,function(){
$(".list_img:first-child").appendTo(list);
list.css("left","0");
});
},3000);
@charset "utf-8";
/* reset */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #222;
}
li{
list-style: none;
}
a{
color: #222;
text-decoration: none;
}
img{
display: block;
}
.clearfix::before,
.clearfix::after{
content: "";
display: block;
clear: both;
}
#wrap{}
#header{}
#banner{}
#contents{}
#footer{}
.container{
width: 1200px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
height: inherit;
}
/* header */
.header{
width: 100%;
/* 생략가능 */
height: 100px;
background-color: lightblue;
}
/* banner */
.banner{
width: 1200px;
height: 600px;
position: relative;
overflow: hidden;
}
.banner h2{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: rgba(255,255,255,0.3);
color: lightgrey;
padding: 20px;
border-radius: 20px;
}
.banner .list{
width: 4800px;
/* 너비값을 3600으로 해줘야 float했을 때 옆으로감 */
height: 600px;
position: relative;
}
.banner .list .list_img{
width: 1200px;
height: 600px;
float: left;
/* 이미지를 옆으로 나열하기 위함 > html에 ul(부모)에 clearfix를 넣어줘야한다. */
}
.banner .list .list_img img{}
/* contents */
.contents{
width: 100%;
height: 400px;
background-color: lightpink;
}
/* footer */
.footer{
width: 100%;
height: 100px;
background-color: lightcyan;
}
|
【本文地址】
公司简介
联系我们