슬라이드배너

오늘은 페이지네이션때문에 애먹던 슬라이드배너를 완성했기때문에...

간단한 슬라이드제이쿼리를 하나 소개해 드리겠습니다.

 

Ulslide 인데요,

적용시키면 아래 이미지처럼됩니다.

 

우측 상단에 동그라미 세개가 페이지네이션인데, 각각의 이미지가 슬라이드되면서 활성화되면

해당 페이지네이션(회색동그라미)이 흰색으로 바뀌어야되는데 이게 잘안되더라구요..

 

검색하다가 방법을 알아내어 해결했습니다.

그럼, 소스나갑니다.

 

 

우선 jquery를 선언하고 아래의 js파일(첨부파일다운받으세요.)을 불러줍니다.

 jquery.ulslide.js

 

대게 head태그안에 삽입합니다.

?

1 2 3

<script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="/js/jquery.ulslide.js"></script><font face="돋움"><span style="white-space: normal;"> </span></font>

js파일을 불러오는(위 소스중 두번째줄) 경로는 파일을 삽입한 경로로 수정해주시면 됩니다.

 

다음으로 html소스입니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<script type="text/javascript"> <script type="text/javascript">     $(function() {         $('#slide_banner').ulslide({             statusbar: true,             width: 1250,    //슬라이드배너 가로사이즈             height: 440,     //슬라이드배너 세로사이즈             affect: 'slide',   //'fade'로 변경시 이미지가 투명하게 사라지면서 다음이미지가 보여짐             axis: 'x',        //슬라이드 방향 x=가로, y=세로             navigator: '#slide_banner_navi a',  //페이지네이션             duration: 400,             autoslide: 5000         });     }); </script>   <div class="slide_wrap">     <div id="slide_banner">         <li><a href="#"><img src="/images/slide_image_1.jpg"></a></li>         <li><a href="#"><img src="/images/slide_image_2.jpg"></a></li>         <li><a href="#"><img src="/images/slide_image_3.jpg"></a></li>     </div>     <ul id="slide_banner_navi">         <li><a href="#1"></a></li>         <li><a href="#2"></a></li>         <li><a href="#3"></a></li>     </ul> </div>

 

간단하죠? div는 슬라이드되는 이미지를 감싸는것이고, ul은 페이지네이션을 뜻합니다.

필요에따라 좌우버튼도 삽입할 수 있습니다. ul태그아래에

?

1 2	<a href="#" id="e1_next"><img src="/images/slide_next_btn.png"></a> <a href="#" id="e1_prev"><img src="/images/slide_prev_btn.png"></a>

위 소스를 삽입하시고 스크립트태그안에

?

1 2	nextButton: '#e1_next', prevButton: '#e1_prev'

위 소스를 추가하시면 됩니다.

 

 

다음으로 css소스입니다.

?

1 2 3 4 5 6 7

.slide_wrap { position:relative; width:493px; height:269px; float:left; margin-right:15px; overflow:hidden; } .slide_banner { width:493px; height:269px; position:absolute; } .slide_banner li { width:493px; float:left; } #slide_banner_navi { position:absolute; top:20px; right:20px; cursor:pointer; } #slide_banner_navi li { float:left; margin-left:5px; z-index:999; width:10px; height:10px; background:url('/images/slide_btn.png') no-repeat; } #slide_banner_navi li.usl-current-parent { background-position:0 -10px; } #slide_banner_navi a { width:10px; height:10px; display:block; }

 

제일고생했던게 #slide_banner_navi 부분인데, 페이지네이션의 동그라미부분의 이미지(slide_btn.png)를

비활성화이미지가 위로, 활성화이미지가 아래로 나란히 붙여서 만드시면 됩니다.

 

스타일시트(css)를 보시면 #slide_banner_navi의 li태그가 활성화(usl-current-parent)되었을때

background-position:0 -10px; 라고 되어있습니다. 백그라운드의 위치가 10픽셀 아래로 보여진다는거죠.

 

이렇게하시면 슬라이드배너 완성입니다.

간단하죠?

 

궁금한게있으시면 댓글달아주세요^^

감사합니다.

 

[출처 - http://blog.naver.com/hyoyeol]

출처: https://two-leaves.tistory.com/entry/간단한-슬라이드-배너만들기 [새싹에서 열매까지]