쉽게 적용할 수 있는 제이쿼리 찾다가 너무 유용하여.. 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 소스입니다. 각 장면의 틀과 이미지들의 크기를 제어할 수 있습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 530 |
 Elbis |
19년 전 | 1231 | |
| 529 |
Elbis |
19년 전 | 1413 | |
| 528 |
Elbis |
19년 전 | 1978 | |
| 527 |
사랑과우정
|
19년 전 | 2389 | |
| 526 | 19년 전 | 2870 | ||
| 525 |
 ⓦangcho |
19년 전 | 2294 | |
| 524 |
 damoa.biz |
19년 전 | 1799 | |
| 523 | 19년 전 | 7037 | ||
| 522 |
ⓦangcho |
19년 전 | 3728 | |
| 521 | 19년 전 | 2338 | ||
| 520 | 19년 전 | 2374 | ||
| 519 | 19년 전 | 2868 | ||
| 518 |
 jepae |
19년 전 | 5780 | |
| 517 |
jepae |
19년 전 | 5554 | |
| 516 |
jepae |
19년 전 | 2260 | |
| 515 |
jepae |
19년 전 | 3294 | |
| 514 | 19년 전 | 2865 | ||
| 513 | 19년 전 | 2217 | ||
| 512 |
개발자관리자
|
19년 전 | 2728 | |
| 511 |
개발자관리자
|
19년 전 | 1584 | |
| 510 |
개발자관리자
|
19년 전 | 1739 | |
| 509 |
개발자관리자
|
19년 전 | 1840 | |
| 508 |
개발자관리자
|
19년 전 | 2006 | |
| 507 |
개발자관리자
|
19년 전 | 1685 | |
| 506 |
개발자관리자
|
19년 전 | 1808 | |
| 505 |
개발자관리자
|
19년 전 | 1773 | |
| 504 |
개발자관리자
|
19년 전 | 1853 | |
| 503 |
개발자관리자
|
19년 전 | 1521 | |
| 502 |
개발자관리자
|
19년 전 | 2648 | |
| 501 | 19년 전 | 1995 | ||
| 500 | 19년 전 | 3236 | ||
| 499 | 19년 전 | 3266 | ||
| 498 | 19년 전 | 2524 | ||
| 497 | 19년 전 | 2601 | ||
| 496 | 19년 전 | 2440 | ||
| 495 | 19년 전 | 2699 | ||
| 494 | 19년 전 | 2678 | ||
| 493 | 19년 전 | 3179 | ||
| 492 | 19년 전 | 2889 | ||
| 491 | 19년 전 | 5306 | ||
| 490 |
Wangcho |
19년 전 | 2124 | |
| 489 |
Wangcho |
19년 전 | 2212 | |
| 488 |
Wangcho |
19년 전 | 2007 | |
| 487 |
Wangcho |
19년 전 | 1943 | |
| 486 |
Wangcho |
19년 전 | 1940 | |
| 485 |
Wangcho |
19년 전 | 2137 | |
| 484 |
뜨락의이름 |
19년 전 | 3212 | |
| 483 |
뜨락의이름 |
19년 전 | 3091 | |
| 482 |
뜨락의이름 |
19년 전 | 2853 | |
| 481 |
뜨락의이름 |
19년 전 | 2545 | |
| 480 |
뜨락의이름 |
19년 전 | 2631 | |
| 479 |
뜨락의이름 |
19년 전 | 2295 | |
| 478 |
뜨락의이름 |
19년 전 | 2327 | |
| 477 |
개발자관리자
|
19년 전 | 1590 | |
| 476 |
개발자관리자
|
19년 전 | 2309 | |
| 475 |
개발자관리자
|
19년 전 | 2659 | |
| 474 |
개발자관리자
|
19년 전 | 2656 | |
| 473 |
개발자관리자
|
19년 전 | 2968 | |
| 472 | 19년 전 | 2734 | ||
| 471 | 19년 전 | 1726 | ||
| 470 | 19년 전 | 1826 | ||
| 469 |
뜨락의이름 |
19년 전 | 2726 | |
| 468 |
jepae |
19년 전 | 2221 | |
| 467 |
뜨락의이름 |
19년 전 | 3995 | |
| 466 |
뜨락의이름 |
19년 전 | 2508 | |
| 465 | 19년 전 | 2378 | ||
| 464 | 19년 전 | 3522 | ||
| 463 |
뜨락의이름 |
19년 전 | 3100 | |
| 462 |
뜨락의이름 |
19년 전 | 2242 | |
| 461 |
뜨락의이름 |
19년 전 | 3035 | |
| 460 |
뜨락의이름 |
19년 전 | 2240 | |
| 459 |
뜨락의이름 |
19년 전 | 3100 | |
| 458 |
뜨락의이름 |
19년 전 | 3527 | |
| 457 |
뜨락의이름 |
19년 전 | 5212 | |
| 456 |
뜨락의이름 |
19년 전 | 3133 | |
| 455 |
스마일미디어
|
19년 전 | 3132 | |
| 454 |
스마일미디어
|
19년 전 | 2719 | |
| 453 |
스마일미디어
|
19년 전 | 2462 | |
| 452 |
스마일미디어
|
19년 전 | 2719 | |
| 451 |
스마일미디어
|
19년 전 | 2447 | |
| 450 |
스마일미디어
|
19년 전 | 2563 | |
| 449 |
스마일미디어
|
19년 전 | 2364 | |
| 448 |
스마일미디어
|
19년 전 | 2692 | |
| 447 | 19년 전 | 2959 | ||
| 446 |
스마일미디어
|
19년 전 | 3244 | |
| 445 |
스마일미디어
|
19년 전 | 7048 | |
| 444 |
스마일미디어
|
19년 전 | 5168 | |
| 443 |
스마일미디어
|
19년 전 | 2426 | |
| 442 |
스마일미디어
|
19년 전 | 5162 | |
| 441 |
스마일미디어
|
19년 전 | 3100 | |
| 440 |
damoa.biz |
19년 전 | 2460 | |
| 439 | 19년 전 | 2155 | ||
| 438 | 19년 전 | 3566 | ||
| 437 |
 imgstory |
19년 전 | 2869 | |
| 436 |
 cunic |
19년 전 | 3248 | |
| 435 |
cunic |
19년 전 | 2887 | |
| 434 | 19년 전 | 3382 | ||
| 433 |
sjsjin
|
19년 전 | 2711 | |
| 432 |
sjsjin
|
19년 전 | 3453 | |
| 431 |
sjsjin
|
19년 전 | 2416 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기