[javascript] 심플 이미지 슬라이더

[javascript] 심플 이미지 슬라이더

단순하게 페이드인, 페이드아웃을 반복하면서 이미지를 보여주는 심플 이미지 슬라이더입니다. 

이전, 다음 버튼 없이 이미지만 자동으로 움직이죠. 코드도 무척 단순합니다. 

먼저 html 부분에 해당 예제소스를 넣어주세요. 

(예제 소스에 있는 jpg는 가지고 계시는 이미지로 써주시면 됩니다.)

<div id="slideshow">
   <div>
     <img src="http://imivory.me/img/noname/1.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/2.jpg">
   </div>
   <div>
     <img src="http://imivory.me/img/noname/3.jpg">
   </div>
</div>

그 다음 CSS에 해당 소스를 넣어주세요. html의 <style></style> 사이로 넣어주셔도 좋습니다.

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

마지막으로 javascript에 해당 소스를 넣어주면 끝이 납니다.

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

예시 페이지는 아래를 참고해주세요. 

출처: https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/