간단한 html 이미지 슬라이드

 

간단한 html 이미지 슬라이드

html 이미지 슬라이드쇼 간단하게 구현할 수 있는 방법을 올려봅니다.

html로 이미지가 움직이게 하려면 소스가 제법 길고 자바스크립트를 이용해야 합니다.

하지만 자바스크립트를 모듈화한 jquery를 이용하면 아주 손쉽게 구현을 할 수 있습니다.

아래의 이미지가 바로 그 모습이다.

 

 

 

 

 

 

어떤가요? 멋지지요?

방법을 보기 전에 먼저 아래 글을 참조해보세요!

 

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

 

 

 

 

이미지 슬라이드쇼를 구현하는 방법은 다음과 같습니다.

 

jquery 소스 링크를 하고요~~

 

 

<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에 cyle-slideshow를 class에 적어주고

옵션으로 cyle-slideshow data-cycle-loader="wait"을 적어주면 됩니다.

 

<div class="cycle-slideshow"

    cycle-slideshow data-cycle-loader="wait"

    data-cycle-timeout=1000

>

    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/7.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/8.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/9.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/10.jpg">
</div>

 

 

이미지 슬라이드에 페이저 위치 표시 하는 방법

 

이미지의 위치, 페이지 위치를 나타내는 방법도 있는데요!

역시나 간단합니다.

<div class="cycle-paper"></div>

만 추가하는 방법으로 해결이 됩니다.

 

 

<div class="cycle-slideshow"

    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000

>

<div class="cycle-pager"></div>

 

    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/6.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/7.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/8.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/9.jpg">
    <img src="http://cfs.tistory.com/custom/blog/183/1835674/skin/images/10.jpg">
</div>

 

 

 

 

위 소스로 하면 페이저의 위치가 하단에 표시가 되는데

스타일시트로 지정을 해줘야 합니다.

아래와 같이 말이죠!

 

아래의 스타일시트 참조하세요!

 

 

<STYLE>
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.cycle-slideshow { width: 500px; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative;}

.cycle-slideshow div.slide { width: 100%; height: 100% }
.cycle-slideshow img {
    /*
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}
/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

.cycle-pager {
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 2px; overflow: hidden;
}
.cycle-pager span {
    font-family: arial; font-size: 50px; width: 16px; height: 16px;
    display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

</STYLE>

 

참조. http://jquery.malsup.com/cycle2/demo/pager.php

css 참조. http://jquery.malsup.com/cycle2/demo/demo-slideshow.css