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. 브라우저를 통해 확인 합니다.
|
