시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크
jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVA > javascript 소스창고 > JQuery > Jquery 와 CSS 를 이용한 가로 슬라이딩 배너 상세정보
사이트등록
현재접속자 새로고침
Jquery 와 CSS 를 이용한 가로 슬라이딩 배너
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 JQuery
다운로드 횟수 2091 회
간단설명 Jquery 와 CSS 를 이용하여 간단한 가로 슬라이딩 배너를 제작할 수 있습니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
소스다운로드 데모 미리보기가 없습니다 스크랩하기


Jquery 와 CSS 를 이용하여 간단한 가로 슬라이딩 배너를 제작할 수 있습니다.

대략적인 작업 순서는 아래와 같으며, 첨부파일을 다운로드 받아 확인하시면 좀 더 이해가 빠릅니다. ^^



1. HTML 파일내에 <DIV> 태그를 아래와 같은 구조가 되도록 작성합니다.


예제 소스)

<div id="warp">
  <div id="mask">
   <div id="content">
    <dl>
     <dt>
      <dd><img src="img/dog01.jpg"></dd>
      <dd><img src="img/dog02.jpg"></dd>
      <dd><img src="img/dog03.jpg"></dd>
      <dd><img src="img/dog04.jpg"></dd>
      <dd><img src="img/dog05.jpg"></dd>
      <dd><img src="img/dog06.jpg"></dd>
      <dd><img src="img/dog07.jpg"></dd>
     </dt>
    </dl>
   </div>
  </div>
 </div>




2. 배너들은 <dd> 태그를 이용하여 쭉 입력한 다음

스타일(float:left) 을 통해 왼쪽으로 붙여 한줄이 되도록 해줍니다.


예제 소스)
#content dd { float:left; width:400px; height:200px; }





3. CSS 스타일을 정의하여 mask 영역 안에 있는 content 내용만 보이도록

mask 영역에도 스타일을 정의해 줍니다.


예제 소스)
#mask { float:left; overflow:hidden; width:400px; height:200px; }




4. 소스 상단에 Jquery 파일을 링크해 줍니다.

예제 소스)
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>




5. 좌,우측 클릭시 실행되도록 자바스크립트 함수를 정의해 줍니다.

예제 소스)
 <script type="text/javascript">

  var divWidth  = "400"; //배너 1개 가로크기

  //이전
  function prev()
  {
   $("#content").stop(true,true);

   var moveX   = parseInt($("#content").css("margin-left"));

   if( moveX < 0 )
   {
    $("#content").animate({"margin-left":"+=" + divWidth + "px"},500);
   }
   else
   {
    alert("처음 입니다.");
    return;
   }
  }

  //다음
  function next()
  {
   $("#content").stop(true,true);

   var hiddenWidth  = ($("#content dd").length-1)*(-divWidth);
   var moveX   = parseInt($("#content").css("margin-left")) ;
   var lastWidth  = ( moveX - divWidth );

   if( hiddenWidth < moveX )
   {
    $("#content").animate({"margin-left":"-=" + divWidth + "px"},500);
   }
   else
   {
    alert("마지막 입니다.");
    return;
   }
  }
 </script>



6. mask 영역 좌우로 버튼을 넣어주고 스타일을 정의해 줍니다.

예제 소스)
#prevbtn { float:left; cursor:pointer; position:relative; top:90px; width:14px; height:28px; padding-right:20px; }
#nextbtn { float:left; cursor:pointer; position:relative; top:90px; width:14px; height:28px; padding-left:20px; }

<div id="prevbtn" onclick="prev()"><img src="img/prev_img.gif" ></div>
<div id="nextbtn" onclick="next()"><img src="img/next_img.gif"></div>



7. 브라우저를 통해 확인 합니다.


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
제가사이즈를 늘려서 응용을 해볼려고하는데요 ㅜㅜ 사이즈가 1280 388 인데 그다음이미지를 넘기니깐 반만넘어가고 더이상안넘어가더라구요 ㅜㅜ 어떻게 해야되나요??
2014-02-17 16:05:30
mwdkim
찬성 63
반대 55
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
도배방지키
 95912573 보이는 도배방지키를 입력하세요.