HTML)
<div id="slide" class="img-box" val="1" max="3">
<img id="img1" src="../site_template/home/main1.jpg" alt="">
<img id="img2" src="../site_template/home/main2.jpg" alt="">
<img id="img3" src="../site_template/home/main3.jpg" alt="">
<img id="img1" src="../site_template/home/main1.jpg" alt="">
</div>
JAVASCRIPT)
const container = document.querySelector('.img-box'),
slides = document.querySelectorAll('img'),
slidecounter = slides.length;
let currentIndex = 0;
var lele = 0;
var i = 0;
function moveleft() {
if (i < slidecounter - 1) {
lele += 100;
i++;
container.style.transition = '.3s'
setTimeout('moveleft()', 3000);
} else {
container.style.transition = '0s'
lele = 0;
i = 0;
setTimeout('moveleft()', 0);
}
container.style.left = "-" + lele + "%";
}
moveleft();
'HTML,CSS,JS' 카테고리의 다른 글
flex의 속성 (0) | 2021.01.29 |
---|---|
JS) event에 관한 참고할 글 (0) | 2021.01.04 |
자바스크립트) replace를 replaceAll 처럼 사용하기 (0) | 2020.12.18 |
css) display : flex , flex-grow , flex-shrink (0) | 2020.12.10 |
css) display:flex 속성 참고 블로그 (0) | 2020.12.09 |