쉽게 적용할 수 있는 제이쿼리 찾다가 너무 유용하여.. 2번째 팁을 올려요.
마우스 훨을 이용하여 이미지를 이동 시키는 법이에요.
참.. 제이쿼리 대단하네요
배너 위에 마우스 휠을 굴리면 바로 앞, 뒷 장면으로 넘길 수 있습니다.
마우스를 올리지 않은 상태에선 자동으로 다음장면으로 넘어갑니다.
첨부파일에 소스가 있으니 다운받아 열어보시기 바랍니다.
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.ulslide.js"></script>
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
1. 첨부파일을 열면 head영역에 마우스휠 슬라이드 배너를 구현시키기 위해 필요한
제이쿼리 플러그인들이 불러와져 있습니다. 경로에 나와있듯이 플러그인들은
js폴더안에 모두 들어 있으니 다른곳에서 활용하실 때 꼭 함께 챙겨가시기 바랍니다.
<script type="text/javascript">
$(function() {
$('#main_bn').ulslide({
statusbar: true,
width: 450, // 슬라이드 배너의 가로크기 조절
height: 250, // 슬라이드 배너의 세로크기 조절
affect: 'slide', // fade로 변경시 서서히 사라지고 나타나는 형태로 바뀜
axis: 'x', // y로 변경시 세로슬라이드로 바뀜
mousewheel: true, // 마우스 휠 사용여부 (true, false)
duration: 400, // 배너 바뀌는 속도
autoslide: 3000 // 배너 바뀌는 딜레이 조절
});
});
</script>
2. head 영역에 있는 제이쿼리 소스입니다. 각 부분의 설명은 위와같고
mousewheel부분을 통해 마우스 휠 사용유무를 제어 할 수 있습니다.
<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>
</div>
</div>
3. body영역의 html 소스입니다. <li></li>한 묶음당 한장면입니다.
한묶음을 추가하거나 빼서 장면수를 조절 할 수 있습니다.
<style type="text/css">
#main_bn{
border:5px solid #000; // 배너 테두리 굵기와 색상
}
#main_bn li {
width:450px; // 배너 속 틀의 가로 크기
height:250px; // 배너 속 틀의 세로 크기
}
#main_bn img{
width:100%; // 이미지가 틀안에 가로 100% 꽉차도록
height:100%; // 이미지가 틀안에 세로 100% 꽉차도록
}
</style>
4. head영역의 CSS 소스입니다. 각 장면의 틀과 이미지들의 크기를 제어할 수 있습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 8130 | 9년 전 | 517 | ||
| 8129 |
 Angelos |
9년 전 | 654 | |
| 8128 | 9년 전 | 521 | ||
| 8127 |
Angelos |
9년 전 | 576 | |
| 8126 | 9년 전 | 508 | ||
| 8125 | 9년 전 | 767 | ||
| 8124 |
Angelos |
9년 전 | 522 | |
| 8123 | 9년 전 | 505 | ||
| 8122 | 9년 전 | 437 | ||
| 8121 | 9년 전 | 541 | ||
| 8120 | 9년 전 | 468 | ||
| 8119 | 9년 전 | 551 | ||
| 8118 |
Angelos |
9년 전 | 633 | |
| 8117 |
 뜨거운형제들 |
9년 전 | 402 | |
| 8116 |
PASKRAN
|
9년 전 | 469 | |
| 8115 | 9년 전 | 460 | ||
| 8114 |
kiplayer
|
9년 전 | 599 | |
| 8113 | 9년 전 | 450 | ||
| 8112 |
Angelos |
9년 전 | 558 | |
| 8111 | 9년 전 | 410 | ||
| 8110 | 9년 전 | 446 | ||
| 8109 | 9년 전 | 373 | ||
| 8108 |
Angelos |
9년 전 | 544 | |
| 8107 |
Angelos |
9년 전 | 439 | |
| 8106 |
Angelos |
9년 전 | 440 | |
| 8105 | 9년 전 | 478 | ||
| 8104 |
Angelos |
9년 전 | 430 | |
| 8103 |
Angelos |
9년 전 | 433 | |
| 8102 |
Angelos |
9년 전 | 399 | |
| 8101 |
snshero
|
9년 전 | 786 | |
| 8100 | 9년 전 | 840 | ||
| 8099 | 9년 전 | 814 | ||
| 8098 | 9년 전 | 714 | ||
| 8097 | 9년 전 | 521 | ||
| 8096 | 9년 전 | 714 | ||
| 8095 | 9년 전 | 846 | ||
| 8094 | 9년 전 | 517 | ||
| 8093 | 9년 전 | 804 | ||
| 8092 | 9년 전 | 762 | ||
| 8091 | 9년 전 | 1145 | ||
| 8090 | 9년 전 | 770 | ||
| 8089 | 9년 전 | 978 | ||
| 8088 | 9년 전 | 648 | ||
| 8087 | 9년 전 | 771 | ||
| 8086 | 9년 전 | 524 | ||
| 8085 | 9년 전 | 487 | ||
| 8084 | 9년 전 | 611 | ||
| 8083 | 9년 전 | 582 | ||
| 8082 | 9년 전 | 755 | ||
| 8081 | 9년 전 | 472 | ||
| 8080 | 9년 전 | 573 | ||
| 8079 | 9년 전 | 527 | ||
| 8078 | 9년 전 | 456 | ||
| 8077 | 9년 전 | 534 | ||
| 8076 | 9년 전 | 411 | ||
| 8075 | 9년 전 | 444 | ||
| 8074 | 9년 전 | 401 | ||
| 8073 | 9년 전 | 455 | ||
| 8072 | 9년 전 | 450 | ||
| 8071 |
o1o111
|
9년 전 | 897 | |
| 8070 | 9년 전 | 404 | ||
| 8069 | 9년 전 | 341 | ||
| 8068 | 9년 전 | 591 | ||
| 8067 | 9년 전 | 392 | ||
| 8066 | 9년 전 | 429 | ||
| 8065 | 9년 전 | 384 | ||
| 8064 | 9년 전 | 369 | ||
| 8063 | 9년 전 | 340 | ||
| 8062 | 9년 전 | 312 | ||
| 8061 | 9년 전 | 353 | ||
| 8060 | 9년 전 | 394 | ||
| 8059 | 9년 전 | 328 | ||
| 8058 | 9년 전 | 258 | ||
| 8057 | 9년 전 | 388 | ||
| 8056 | 9년 전 | 311 | ||
| 8055 | 9년 전 | 355 | ||
| 8054 | 9년 전 | 367 | ||
| 8053 | 9년 전 | 416 | ||
| 8052 | 9년 전 | 295 | ||
| 8051 | 9년 전 | 336 | ||
| 8050 | 9년 전 | 396 | ||
| 8049 | 9년 전 | 326 | ||
| 8048 | 9년 전 | 437 | ||
| 8047 | 9년 전 | 362 | ||
| 8046 | 9년 전 | 312 | ||
| 8045 | 9년 전 | 262 | ||
| 8044 | 9년 전 | 348 | ||
| 8043 | 9년 전 | 295 | ||
| 8042 | 9년 전 | 296 | ||
| 8041 | 9년 전 | 354 | ||
| 8040 | 9년 전 | 276 | ||
| 8039 | 9년 전 | 321 | ||
| 8038 | 9년 전 | 271 | ||
| 8037 | 9년 전 | 410 | ||
| 8036 | 9년 전 | 486 | ||
| 8035 | 9년 전 | 436 | ||
| 8034 | 9년 전 | 393 | ||
| 8033 | 9년 전 | 353 | ||
| 8032 | 9년 전 | 447 | ||
| 8031 | 9년 전 | 355 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기