<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를 할 줄 아시는 분은 알아서 조절하시겠지만
잘 모르시는 분은 분홍색 설명부분을 참고하여 버튼 위치만 조절하셔도 무난할 것 같습니다.
댓글 2개
10년 전
감사
OReallyO
10년 전
좋은 자료 공유 감사해요 ^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8130 | 9년 전 | 465 | ||
| 8129 |
 Angelos |
9년 전 | 626 | |
| 8128 | 9년 전 | 498 | ||
| 8127 |
Angelos |
9년 전 | 563 | |
| 8126 | 9년 전 | 491 | ||
| 8125 | 9년 전 | 749 | ||
| 8124 |
Angelos |
9년 전 | 480 | |
| 8123 | 9년 전 | 467 | ||
| 8122 | 9년 전 | 403 | ||
| 8121 | 9년 전 | 513 | ||
| 8120 | 9년 전 | 444 | ||
| 8119 | 9년 전 | 523 | ||
| 8118 |
Angelos |
9년 전 | 608 | |
| 8117 |
 뜨거운형제들 |
9년 전 | 382 | |
| 8116 |
PASKRAN
|
9년 전 | 450 | |
| 8115 | 9년 전 | 442 | ||
| 8114 |
kiplayer
|
9년 전 | 584 | |
| 8113 | 9년 전 | 416 | ||
| 8112 |
Angelos |
9년 전 | 533 | |
| 8111 | 9년 전 | 386 | ||
| 8110 | 9년 전 | 425 | ||
| 8109 | 9년 전 | 334 | ||
| 8108 |
Angelos |
9년 전 | 526 | |
| 8107 |
Angelos |
9년 전 | 414 | |
| 8106 |
Angelos |
9년 전 | 409 | |
| 8105 | 9년 전 | 456 | ||
| 8104 |
Angelos |
9년 전 | 408 | |
| 8103 |
Angelos |
9년 전 | 409 | |
| 8102 |
Angelos |
9년 전 | 363 | |
| 8101 |
snshero
|
9년 전 | 750 | |
| 8100 | 9년 전 | 817 | ||
| 8099 | 9년 전 | 783 | ||
| 8098 | 9년 전 | 693 | ||
| 8097 | 9년 전 | 482 | ||
| 8096 | 9년 전 | 684 | ||
| 8095 | 9년 전 | 802 | ||
| 8094 | 9년 전 | 482 | ||
| 8093 | 9년 전 | 778 | ||
| 8092 | 9년 전 | 737 | ||
| 8091 | 9년 전 | 1127 | ||
| 8090 | 9년 전 | 737 | ||
| 8089 | 9년 전 | 942 | ||
| 8088 | 9년 전 | 616 | ||
| 8087 | 9년 전 | 722 | ||
| 8086 | 9년 전 | 494 | ||
| 8085 | 9년 전 | 458 | ||
| 8084 | 9년 전 | 601 | ||
| 8083 | 9년 전 | 569 | ||
| 8082 | 9년 전 | 736 | ||
| 8081 | 9년 전 | 447 | ||
| 8080 | 9년 전 | 533 | ||
| 8079 | 9년 전 | 489 | ||
| 8078 | 9년 전 | 421 | ||
| 8077 | 9년 전 | 495 | ||
| 8076 | 9년 전 | 384 | ||
| 8075 | 9년 전 | 399 | ||
| 8074 | 9년 전 | 368 | ||
| 8073 | 9년 전 | 418 | ||
| 8072 | 9년 전 | 407 | ||
| 8071 |
o1o111
|
9년 전 | 856 | |
| 8070 | 9년 전 | 375 | ||
| 8069 | 9년 전 | 303 | ||
| 8068 | 9년 전 | 567 | ||
| 8067 | 9년 전 | 374 | ||
| 8066 | 9년 전 | 402 | ||
| 8065 | 9년 전 | 353 | ||
| 8064 | 9년 전 | 333 | ||
| 8063 | 9년 전 | 295 | ||
| 8062 | 9년 전 | 286 | ||
| 8061 | 9년 전 | 333 | ||
| 8060 | 9년 전 | 352 | ||
| 8059 | 9년 전 | 287 | ||
| 8058 | 9년 전 | 226 | ||
| 8057 | 9년 전 | 353 | ||
| 8056 | 9년 전 | 282 | ||
| 8055 | 9년 전 | 314 | ||
| 8054 | 9년 전 | 331 | ||
| 8053 | 9년 전 | 373 | ||
| 8052 | 9년 전 | 258 | ||
| 8051 | 9년 전 | 303 | ||
| 8050 | 9년 전 | 368 | ||
| 8049 | 9년 전 | 290 | ||
| 8048 | 9년 전 | 404 | ||
| 8047 | 9년 전 | 336 | ||
| 8046 | 9년 전 | 263 | ||
| 8045 | 9년 전 | 237 | ||
| 8044 | 9년 전 | 300 | ||
| 8043 | 9년 전 | 243 | ||
| 8042 | 9년 전 | 269 | ||
| 8041 | 9년 전 | 307 | ||
| 8040 | 9년 전 | 238 | ||
| 8039 | 9년 전 | 299 | ||
| 8038 | 9년 전 | 251 | ||
| 8037 | 9년 전 | 365 | ||
| 8036 | 9년 전 | 451 | ||
| 8035 | 9년 전 | 402 | ||
| 8034 | 9년 전 | 365 | ||
| 8033 | 9년 전 | 321 | ||
| 8032 | 9년 전 | 373 | ||
| 8031 | 9년 전 | 311 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기