쉽게 적용할 수 있는 제이쿼리 찾다가 너무 유용하여.. 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 소스입니다. 각 장면의 틀과 이미지들의 크기를 제어할 수 있습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 730 |
 드렁크수달스 |
19년 전 | 2733 | |
| 729 |
그레이스웹
|
19년 전 | 3529 | |
| 728 |
 happycommunity |
19년 전 | 2712 | |
| 727 |
happycommunity |
19년 전 | 2546 | |
| 726 |
happycommunity |
19년 전 | 2365 | |
| 725 |
happycommunity |
19년 전 | 2270 | |
| 724 |
happycommunity |
19년 전 | 2155 | |
| 723 |
happycommunity |
19년 전 | 4272 | |
| 722 |
happycommunity |
19년 전 | 2698 | |
| 721 |
happycommunity |
19년 전 | 2192 | |
| 720 |
happycommunity |
19년 전 | 2288 | |
| 719 |
happycommunity |
19년 전 | 2866 | |
| 718 |
happycommunity |
19년 전 | 1974 | |
| 717 |
happycommunity |
19년 전 | 3205 | |
| 716 |
happycommunity |
19년 전 | 2766 | |
| 715 |
happycommunity |
19년 전 | 2292 | |
| 714 |
happycommunity |
19년 전 | 1844 | |
| 713 |
happycommunity |
19년 전 | 2261 | |
| 712 |
happycommunity |
19년 전 | 2023 | |
| 711 |
happycommunity |
19년 전 | 1922 | |
| 710 |
happycommunity |
19년 전 | 2493 | |
| 709 |
happycommunity |
19년 전 | 2351 | |
| 708 |
happycommunity |
19년 전 | 3903 | |
| 707 |
happycommunity |
19년 전 | 3750 | |
| 706 |
happycommunity |
19년 전 | 2255 | |
| 705 |
 강강술냄세 |
19년 전 | 3331 | |
| 704 |
강강술냄세 |
19년 전 | 2003 | |
| 703 |
강강술냄세 |
19년 전 | 2403 | |
| 702 |
드렁크수달스 |
19년 전 | 2296 | |
| 701 |
홀로남은자
|
19년 전 | 2362 | |
| 700 |
홀로남은자
|
19년 전 | 2189 | |
| 699 | 19년 전 | 2831 | ||
| 698 |
 WAYKIKI |
19년 전 | 2848 | |
| 697 |
WAYKIKI |
19년 전 | 3189 | |
| 696 |
WAYKIKI |
19년 전 | 3058 | |
| 695 |
WAYKIKI |
19년 전 | 2730 | |
| 694 |
happycommunity |
19년 전 | 2958 | |
| 693 |
happycommunity |
19년 전 | 3208 | |
| 692 |
드렁크수달스 |
19년 전 | 2894 | |
| 691 |
 날아라짱가 |
19년 전 | 2644 | |
| 690 | 19년 전 | 2944 | ||
| 689 | 19년 전 | 4524 | ||
| 688 | 19년 전 | 2449 | ||
| 687 | 19년 전 | 2472 | ||
| 686 | 19년 전 | 3501 | ||
| 685 | 19년 전 | 3182 | ||
| 684 | 19년 전 | 2858 | ||
| 683 | 19년 전 | 2078 | ||
| 682 | 19년 전 | 1785 | ||
| 681 | 19년 전 | 2885 | ||
| 680 | 19년 전 | 1738 | ||
| 679 | 19년 전 | 2321 | ||
| 678 | 19년 전 | 3972 | ||
| 677 | 19년 전 | 3760 | ||
| 676 | 19년 전 | 3482 | ||
| 675 | 19년 전 | 3420 | ||
| 674 |
happycommunity |
19년 전 | 1580 | |
| 673 |
happycommunity |
19년 전 | 1942 | |
| 672 |
happycommunity |
19년 전 | 1871 | |
| 671 | 19년 전 | 2537 | ||
| 670 | 19년 전 | 4651 | ||
| 669 |
happycommunity |
19년 전 | 2783 | |
| 668 |
happycommunity |
19년 전 | 1935 | |
| 667 |
happycommunity |
19년 전 | 1955 | |
| 666 |
happycommunity |
19년 전 | 1858 | |
| 665 |
happycommunity |
19년 전 | 2595 | |
| 664 |
happycommunity |
19년 전 | 8196 | |
| 663 |
happycommunity |
19년 전 | 2747 | |
| 662 |
happycommunity |
19년 전 | 2804 | |
| 661 |
happycommunity |
19년 전 | 3061 | |
| 660 |
happycommunity |
19년 전 | 2234 | |
| 659 |
happycommunity |
19년 전 | 2254 | |
| 658 |
happycommunity |
19년 전 | 2190 | |
| 657 |
happycommunity |
19년 전 | 2096 | |
| 656 |
happycommunity |
19년 전 | 2290 | |
| 655 |
happycommunity |
19년 전 | 2547 | |
| 654 |
날아라짱가 |
19년 전 | 3090 | |
| 653 | 19년 전 | 2341 | ||
| 652 | 19년 전 | 1928 | ||
| 651 |
 뜨락의이름 |
19년 전 | 2868 | |
| 650 | 19년 전 | 5029 | ||
| 649 | 19년 전 | 3525 | ||
| 648 | 19년 전 | 3482 | ||
| 647 | 19년 전 | 2988 | ||
| 646 | 19년 전 | 2423 | ||
| 645 | 19년 전 | 1510 | ||
| 644 | 19년 전 | 3150 | ||
| 643 | 19년 전 | 2027 | ||
| 642 |
 damoa.biz |
19년 전 | 5407 | |
| 641 | 19년 전 | 2445 | ||
| 640 | 19년 전 | 3442 | ||
| 639 | 19년 전 | 2883 | ||
| 638 | 19년 전 | 1771 | ||
| 637 | 19년 전 | 3884 | ||
| 636 | 19년 전 | 2436 | ||
| 635 | 19년 전 | 2326 | ||
| 634 |
 cmpanel |
19년 전 | 3029 | |
| 633 |
cmpanel |
19년 전 | 3313 | |
| 632 | 19년 전 | 2522 | ||
| 631 | 19년 전 | 2280 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기