jquery를 이용한 이미지 슬라이드쇼, 롤링

 

jquery를 이용한 이미지 슬라이드쇼, 이미지롤링

 

jquery를 이용한 이미지 슬라이드쇼 구현하는 방법입니다.

jquery를 이용하면 아주 간단하게 슬라이드쇼가 구현됩니다.

 

일단 한번 보실까요?

 

 

 

지극히 노말하지만 플래시를 이용하지 않고도 이렇게 이미지 슬라이드쇼를 구현할 수 있습니다.

방법을 알아볼까요?

 

 

cycle2.js 를 이용하는 방법

 

아래와 같이 cycle2.js만 추가하면 됩니다.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>

 

그리고 이렇게 div에 cycle-slideshow를 class로 지정해주고

이미지를 넣어주기만 하면 됩니다.

 

<div class="cycle-slideshow">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/1.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/2.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/3.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/4.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/5.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
</div>

 

정말 간단하죠?

 

물론 여러가지 옵션이 있습니다.

이게 다라면 뭔가 부족한것 같은 느낌이 들 것입니다.

아주 다양한 옵션이 있는데요~~

한번 볼까요?

 

이미지 슬라이드쇼 옵션

 

옵션은 div에 적어주면 됩니다.

자바스크립트 수정을 하지 않고, css 수정을 하지 않고 DIV에 바로 옵션설정을 할 수 있습니다.

 

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="200"
>
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/1.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/2.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/3.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/4.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/5.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
</div>

 

 

 

클릭시 이미지 슬라이드쇼 옵션

 

prev next 버튼을 누르면 사진이 바뀌는 옵션입니다.

 

<div class="cycle-slideshow"

    data-cycle-fx="scrollHorz"

    data-cycle-timeout="0"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
>
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/1.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/2.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/3.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/4.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/5.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
</div>
 
<div class="center">
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a>
</div> 

 

Prev Next

 

 

참조출처. http://jquery.malsup.com/cycle2/demo/basic.php

source : jquery.cycle2.js