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();
자바스크립트 공부중 구현해본 이미지 슬라이드, 복습 겸 간단하게나마 구현하여 기록해 보았습니다. See the Pen
abbQozz by pilyeong (@pilyeooong) on CodePen. item 갯수만큼 slider의 크기를 유동적으로 설정하도록 하였으므로, item의 컨텐츠를 추가하여도 코드 수정이 불필요하도록 구현.이미지 슬라이드 Carousel
(맥북 15인치 환경에서 작업하였습니다. 간혹, 모바일 환경에서는 제대로 나오지 않을 수 있습니다.)
코드 사용시에는 필요에 따라 버튼이나 컨텐츠 , 크기 등 부분만 고쳐 사용하면 될 듯 합니다.
See the Pen //codepen.io/pilyeooong/pen/KKKGOGe">
KKKGOGe by pilyeong (//codepen.io/pilyeooong">@pilyeooong)
on //codepen.io">CodePen.
첫번째 예시 코드를 살짝 변형하여 자동으로 슬라이드가 넘어가도록 설정한 예시입니다.
setTimeout을 이용하여 일정시간이 지나면 슬라이드가 넘어가도록 한것입니다.
감사합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
var index = 0; //이미지에 접근하는 인덱스
window.onload = function(){
slideShow();
}
function slideShow() {
var i;
var x = document.getElementsByClassName("slide1"); //slide1에 대한 dom 참조
for (i = 0; i < x.length; i++) {
x[i].style.display = "none"; //처음에 전부 display를 none으로 한다.
}
index++;
if (index > x.length) {
index = 1; //인덱스가 초과되면 1로 변경
}
x[index-1].style.display = "block"; //해당 인덱스는 block으로
setTimeout(slideShow, 4000); //함수를 4초마다 호출
}
</script>
<body>
<div>
<img class="slide1" src="../images/1.PNG" >
<img class="slide1" src="../images/2.PNG">
<img class="slide1" src="../images/3.PNG">
</div>
</body>
</html>