쉽게 적용할 수 있는 제이쿼리 찾다가 너무 유용하여.. 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 소스입니다. 각 장면의 틀과 이미지들의 크기를 제어할 수 있습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6830 |
112211dd
|
11년 전 | 791 | |
| 6829 |
진짜다진짜가나타남
|
11년 전 | 1207 | |
| 6828 | 11년 전 | 821 | ||
| 6827 |
봉보로봉봉
|
11년 전 | 910 | |
| 6826 |
jinion
|
11년 전 | 820 | |
| 6825 | 11년 전 | 803 | ||
| 6824 |
yunkiri486
|
11년 전 | 724 | |
| 6823 |
2donggalbi
|
11년 전 | 852 | |
| 6822 | 11년 전 | 849 | ||
| 6821 | 11년 전 | 802 | ||
| 6820 | 11년 전 | 3106 | ||
| 6819 | 11년 전 | 1250 | ||
| 6818 | 11년 전 | 518 | ||
| 6817 |
 별을따는소년 |
11년 전 | 607 | |
| 6816 | 11년 전 | 2077 | ||
| 6815 | 11년 전 | 1214 | ||
| 6814 | 11년 전 | 864 | ||
| 6813 | 11년 전 | 604 | ||
| 6812 |
 Terrorboy |
11년 전 | 984 | |
| 6811 | 11년 전 | 581 | ||
| 6810 | 11년 전 | 1536 | ||
| 6809 |
낚시가좋아
|
11년 전 | 1047 | |
| 6808 | 11년 전 | 439 | ||
| 6807 | 11년 전 | 763 | ||
| 6806 |
Unhappy
|
11년 전 | 1772 | |
| 6805 | 11년 전 | 1605 | ||
| 6804 | 11년 전 | 1121 | ||
| 6803 | 11년 전 | 562 | ||
| 6802 |
asdfg
|
11년 전 | 1135 | |
| 6801 |
아트귀농인
|
11년 전 | 501 | |
| 6800 | 11년 전 | 2555 | ||
| 6799 | 11년 전 | 1356 | ||
| 6798 | 11년 전 | 1466 | ||
| 6797 | 11년 전 | 626 | ||
| 6796 |
purple63
|
11년 전 | 429 | |
| 6795 | 11년 전 | 2636 | ||
| 6794 |
커네드커네드
|
11년 전 | 959 | |
| 6793 | 11년 전 | 408 | ||
| 6792 | 11년 전 | 2498 | ||
| 6791 | 11년 전 | 524 | ||
| 6790 | 11년 전 | 2258 | ||
| 6789 |
리아빌리티
|
11년 전 | 3097 | |
| 6788 | 11년 전 | 1345 | ||
| 6787 | 11년 전 | 680 | ||
| 6786 | 11년 전 | 392 | ||
| 6785 | 11년 전 | 721 | ||
| 6784 |
Terrorboy |
11년 전 | 848 | |
| 6783 | 11년 전 | 583 | ||
| 6782 | 11년 전 | 3653 | ||
| 6781 |
리아빌리티
|
11년 전 | 486 | |
| 6780 | 11년 전 | 528 | ||
| 6779 | 11년 전 | 483 | ||
| 6778 | 11년 전 | 4689 | ||
| 6777 |
바보온달123
|
11년 전 | 612 | |
| 6776 | 11년 전 | 931 | ||
| 6775 | 11년 전 | 730 | ||
| 6774 |
DANet
|
11년 전 | 639 | |
| 6773 | 11년 전 | 1558 | ||
| 6772 | 11년 전 | 1356 | ||
| 6771 | 11년 전 | 617 | ||
| 6770 | 11년 전 | 1159 | ||
| 6769 | 11년 전 | 952 | ||
| 6768 | 11년 전 | 690 | ||
| 6767 | 11년 전 | 583 | ||
| 6766 | 11년 전 | 1260 | ||
| 6765 |
크림나이트
|
11년 전 | 997 | |
| 6764 | 11년 전 | 1542 | ||
| 6763 | 11년 전 | 2600 | ||
| 6762 | 11년 전 | 535 | ||
| 6761 |
Terrorboy |
11년 전 | 780 | |
| 6760 |
Terrorboy |
11년 전 | 710 | |
| 6759 | 11년 전 | 3349 | ||
| 6758 | 11년 전 | 1007 | ||
| 6757 | 11년 전 | 1267 | ||
| 6756 | 11년 전 | 891 | ||
| 6755 |
Terrorboy |
11년 전 | 568 | |
| 6754 |
Terrorboy |
11년 전 | 711 | |
| 6753 |
Terrorboy |
11년 전 | 1375 | |
| 6752 | 11년 전 | 607 | ||
| 6751 |
Terrorboy |
11년 전 | 652 | |
| 6750 |
Terrorboy |
11년 전 | 2019 | |
| 6749 | 11년 전 | 1213 | ||
| 6748 |
 HackYa |
11년 전 | 1115 | |
| 6747 | 11년 전 | 1168 | ||
| 6746 | 11년 전 | 840 | ||
| 6745 |
Terrorboy |
11년 전 | 911 | |
| 6744 | 11년 전 | 851 | ||
| 6743 | 11년 전 | 1289 | ||
| 6742 | 11년 전 | 538 | ||
| 6741 |
Abilityarch
|
11년 전 | 610 | |
| 6740 | 11년 전 | 649 | ||
| 6739 |
leewin20
|
11년 전 | 1234 | |
| 6738 | 11년 전 | 506 | ||
| 6737 | 11년 전 | 1218 | ||
| 6736 | 11년 전 | 1256 | ||
| 6735 | 11년 전 | 546 | ||
| 6734 | 11년 전 | 1283 | ||
| 6733 |
RipperTNT
|
11년 전 | 1839 | |
| 6732 |
Terrorboy |
11년 전 | 1335 | |
| 6731 |
Terrorboy |
11년 전 | 1395 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기