제이쿼리 가로 슬라이드 [jquery.ulslide.js 사용법]
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="./js/jquery.ulslide.js"></script>
1. 첨부파일에 있는 압축파일을 다운받아서 html파일을 열면 head영역에
위와같이 밑바탕이 되는 제이쿼리소스가 불러와져있습니다.
윗쪽의 소스는 제이쿼리 사이트에서 바로 퍼온것이고 아래쪽에 있는 소스는 js폴더에
들어있는 파일을 불러온것이기 때문에 활용하실때 꼭 함께 가지고 다녀야 합니다.
<script type="text/javascript">
$(function() {
$('#main_bn').ulslide({
statusbar: true,
width: 450, // 슬라이드 배너의 가로크기 조절
height: 250, // 슬라이드 배너의 세로크기 조절
affect: 'slide', // fade로 변경시 서서히 사라지고 나타나는 형태로 바뀜
axis: 'x', // y로 변경시 세로슬라이드로 바뀜
navigator: '#main_bn_bt a',
duration: 400, // 배너 바뀌는 속도
autoslide: 3000 // 배너 바뀌는 딜레이 조절
});
});
</script>
2. head쪽에 있는 제이쿼리 소스입니다. 분홍색 설명을 참고하여 입맛대로 조절하시면 됩니다.
<div id="wrap">
<div id="main_bn">
<li><img src="./img/image_1.jpg" alt="" /></li>
<li><img src="./img/image_2.jpg" alt="" /></li>
<li><img src="./img/image_3.jpg" alt="" /></li> // li 한묶음을 추가하면 배너 이미지가 추가됨
</div>
<div id="main_bn_bt">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li> // li 한묶음을 추가하면 버튼이 추가됨
</div>
</div>
3. body 영역에 있는 html입니다. li갯수를 배너 이미지와 버튼 갯수를 원하는 만큼 조절하면 됩니다.
<style type="text/css">
#wrap{position:relative;}
#main_bn_bt {
list-style-type:none;
position:absolute;
bottom:5px; left:5px; // 버튼위치 아래(bottom)에서 몇px, 왼쪽(left)에서 몇px
}
#main_bn_bt li {
float: left; padding:3px 6px; background:#000;
color:#fff; margin-right:5px;
}
a, a:hover, a:visited{text-decoration:none; color:#fff;}
</style>
4. head 영역에 있는 css입니다. css를 할 줄 아시는 분은 알아서 조절하시겠지만
잘 모르시는 분은 분홍색 설명부분을 참고하여 버튼 위치만 조절하셔도 무난할 것 같습니다.
<script type="text/javascript" src="./js/jquery.ulslide.js"></script>
1. 첨부파일에 있는 압축파일을 다운받아서 html파일을 열면 head영역에
위와같이 밑바탕이 되는 제이쿼리소스가 불러와져있습니다.
윗쪽의 소스는 제이쿼리 사이트에서 바로 퍼온것이고 아래쪽에 있는 소스는 js폴더에
들어있는 파일을 불러온것이기 때문에 활용하실때 꼭 함께 가지고 다녀야 합니다.
<script type="text/javascript">
$(function() {
$('#main_bn').ulslide({
statusbar: true,
width: 450, // 슬라이드 배너의 가로크기 조절
height: 250, // 슬라이드 배너의 세로크기 조절
affect: 'slide', // fade로 변경시 서서히 사라지고 나타나는 형태로 바뀜
axis: 'x', // y로 변경시 세로슬라이드로 바뀜
navigator: '#main_bn_bt a',
duration: 400, // 배너 바뀌는 속도
autoslide: 3000 // 배너 바뀌는 딜레이 조절
});
});
</script>
2. head쪽에 있는 제이쿼리 소스입니다. 분홍색 설명을 참고하여 입맛대로 조절하시면 됩니다.
<div id="wrap">
<div id="main_bn">
<li><img src="./img/image_1.jpg" alt="" /></li>
<li><img src="./img/image_2.jpg" alt="" /></li>
<li><img src="./img/image_3.jpg" alt="" /></li> // li 한묶음을 추가하면 배너 이미지가 추가됨
</div>
<div id="main_bn_bt">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li> // li 한묶음을 추가하면 버튼이 추가됨
</div>
</div>
3. body 영역에 있는 html입니다. li갯수를 배너 이미지와 버튼 갯수를 원하는 만큼 조절하면 됩니다.
<style type="text/css">
#wrap{position:relative;}
#main_bn_bt {
list-style-type:none;
position:absolute;
bottom:5px; left:5px; // 버튼위치 아래(bottom)에서 몇px, 왼쪽(left)에서 몇px
}
#main_bn_bt li {
float: left; padding:3px 6px; background:#000;
color:#fff; margin-right:5px;
}
a, a:hover, a:visited{text-decoration:none; color:#fff;}
</style>
4. head 영역에 있는 css입니다. css를 할 줄 아시는 분은 알아서 조절하시겠지만
잘 모르시는 분은 분홍색 설명부분을 참고하여 버튼 위치만 조절하셔도 무난할 것 같습니다.
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 2개