웹퍼블리셔-제이쿼리]화살표클릭이벤트

0

오늘은 화살표를 클릭했을 때 이미지가 바뀌는 예제를 풀려고 합니다.

먼저 부모 박스를 만들어주고 안에 img_wrap로 img를 감싸줍니다.

 

이제 style로 올라가서 꾸며주도록 합시다.

 

작성하면 이렇게 브라우저에 출력됩니다.

이제 제이쿼리를 이용하여 이벤트를 넣어줍니다.

right버튼을 클릭할 때 마다 i의 값은 증가하고

i값이 4보다 커지면(img가 0~4까지 총 5개 존재하므로) 다시 0으로 돌아온다는 조건을 세웁니다.

 

그리고 img_wrap을 left로 -600*i(사진에 주어진 숫자)만큼 animate해주면 됩니다.

left버튼을 눌렀을 때도 이동하도록 작성하겠습니다.

이렇게 작성해주면 완성입니다!!

0