<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0; padding:0;}
ul,li{list-style: none;}
#banner_ul > li{
float: left;
}
#banner{
width: 1920px;
height: 500px;
position: absolute;
overflow: hidden;
}
#banner_ul > li > img{
display: inline-block;
width: 1920px;
height: 500px;
}
</style>
</head>
<body>
<div id="root">
<div id="banner">
<ul id="banner_ul">
<li><img src="./images/visual.png"></li>
<li><img src="./images/visual2.png"></li>
<li><img src="./images/visual3.png"></li>
<li><img src="./images/visual4.png"></li>
</ul>
</div>
</div>
<script type="text/javascript">
function move(){
bannerUl = document.querySelector('#banner_ul');
li = document.querySelectorAll('#banner_ul > li');
bannerUl.appendChild(li[0]);
}
setInterval(move,3000);
</script>
</body>
</html>li[0] >> 이게 위에서 선택된 li element의 가장 첫번째를 가르킨다.
appendChild 로 ul element가장 아래에 넣는다 라는 소리.
써놓고 보니 진짜 간단한데 왜 생각을 못했지,,
'Lecture' 카테고리의 다른 글
| slider - pause/play btn (0) | 2021.03.31 |
|---|---|
| 0330.기초 (0) | 2021.03.30 |
| 3.23 - Delete Btn (0) | 2021.03.24 |
| 3.22 - To do list (1) | 2021.03.22 |
| 3.22 - JS (0) | 2021.03.22 |
