jquery - 이미지 자동 슬라이드

- HTML

<div class="imgs">
  <img src="images/img1.jpg" alt="no">
  <img src="images/img2.jpg" alt="no">
  <img src="images/img3.jpg" alt="no">
  <img src="images/img4.jpg" alt="no">
</div>

 

- CSS

img {width:500px; height:500px;}

#imgslide { margin-top: 10px;}

.imgs {
    position: relative;
    overflow: hidden;
    height:500px;
    background-color: #000;
}

.imgs>img {
    width:20%;
    position: absolute;
    transition: all 1s;
}

 

- JQUERY

var imgs = 3;
var now = 0;

function slide() {
    now = now == imgs ? 0 : now += 1; 

    $(".imgs>img").eq(now - 1).css({"margin-left": "-500px"});
    $(".imgs>img").eq(now).css({"margin-left": "0px"});
}

function start() {
    $(".imgs>img").eq(0).siblings().css({"margin-left":"-500px"});
    
    setInterval(function () { slide()}, 2000);
}
start();


설명

now = now == imgs ? 0 : now += 1; 는
now와 imgs 번호가 같으면 now가 0으로 바뀌고,
그렇지 않다면 now에 +1을 해준다.

첫번째 사진부터라면  인덱스 번호 0번과 var imgs = 3 이 같지 않으므로
now += 1이 동작한다.  0 + 1 은 1이므로

아래쪽 eq(now -  1)에서 현재 now는 1이므로   1 - 1이니,
인덱스 번호 0번 (첫번째 이미지)에 margin-left -500px 이 적용됨.

이 순서로 인덱스 번호
0 + 1 = now(1)   eq(now(1) -  1) = now는 0
1 + 1 = now(2)   eq(now(2) -  1) = now는 1
2 + 1 = now(3)   eq(now(3) -  1) = now는 2
3 + 1 = now(4)   eq(now(4) -  1) = now는 3

이제 now가 3이 됐을때 
now = now == imgs ? 0 : now += 1;
now == imgs 가 같으므로 now는 다시 0으로 바뀐다