jQuery를 이용한 스크롤배너 플러그인 입니다.
**버그수정**
메소드명 수정 : 기존메소드(scroll)명을 변경했습니다. 변경된 이름은 scrollBanner 입니다.
** 사용법 **
jQuery 라이브러리와 아래의 JS가 추가된 상태에서
배너 DIV에 scroll 함수를 실행합니다.
옵션값들중에 필수 값이 있으니 옵션값 누락시 예외가 떨어질수 있습니다.
$(".cContents").scrollBanner({
"cContentsClass" : "cContents", //스크롤을 감싸고 있는 영역(DIV)의 클래스명
"cContentsWidth" : "100%", //스크롤을 감싸고 있는 영역(DIV)의 넓이
"cContentsHeight" : "160px", //스크롤을 감싸고 있는 영역(DIV)의 높이
"cWrapperClass" : "cWrapper", //리스트Wrap(UL)의 클래스명
"cListClass" : "cList", //배너(LI)의 클래스명
"leftBtnClass" : "cLeft", //왼쪽 이동버튼의 클래스명
"rightBtnClass" : "cRight", //오른쪽 이동버튼의 클래스명
"dotWrap" : "cdot", //Dot 인디게이터를 감싸고 있는 영역(UL)의 클래스명
"dotElementClass" : "dotList", //Dot리스트(LI)의 클래스명
"dotActClass" : "active", //활성화면 인디게이터(LI)에 추가될 클래스명
"dotMoveYn" : true, //Dot 인디게이터 사용유무
"viewItemCnt" : "1", //화면에 노출될 배너의 수
"moveItemCnt" : "1", //페이지 이동시 이동될 배너의 수
"autoScrollYn" : false, //배너자동롤링 여부
"scorllTimer" : "2000", //배너자동롤리 간격
"touchEvent" : true, //터치이벤트 사용 여부
"verticalMove" : false //상하슬라이드
});
** HTML 전체 소스입니다. **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"
name="viewport">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="/js/jquery.touchwipe.min.js"></script>
<script src="/js/jquery.scrollBanner.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul li {
list-style-type: none;
}
.dotWrap li {
display: inline-block;
width: 7px;
height: 7px;
padding: 0px 2px;
background: url(/img/icon_dot02.png) no-repeat top left;
-webkit-background-size: 7px;
background-size: 7px;
vertical-align: top;
}
.dotWrap li.active {
background: url(/img/icon_dot01.png) no-repeat top left;
-webkit-background-size: 7px;
background-size: 7px;
}
.cList {
text-align: center;
}
</style>
<script>
$(document).ready(function () {
$(".cContents").scrollBanner({
//컨텐츠 영역 정의
"cContentsClass" : "cContents",
"cContentsWidth" : "100%",
"cContentsHeight" : "200px",
//ul
"cWrapperClass" : "cWrapper",
//li
"cListClass" : "cList",
//한번에 노출할 리스트의 개수
"viewItemCnt" : "1",
//한번에 움직일 배너의 개수
"moveItemCnt" : "1",
//좌우버튼 정의
"leftBtnClass" : "cLeft",
"rightBtnClass" : "cRight",
//dot영역 정의
"dotMoveYn" : true,
"dotWrap" : "cdot",
"dotElementClass" : "dotList",
"dotActClass" : "active",
//자동롤링
"autoScrollYn" : true,
"scorllTimer" : "2000",
//터치이벤트
"touchEvent" : true,
//상하롤링
"verticalMove" : true
});
});
</script>
</head>
<div class="cContents">
<ul class="cWrapper">
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img1.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img2.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img3.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img4.jpg" /></li>
<li class="cList" style="background-color: rgb(245, 245, 245);"><img src="/img/img5.jpg" /></li>
</ul>
</div>
<ul class="dotWrap cdot">
<li class="dotList active"></li>
<li class="dotList"></li>
<li class="dotList"></li>
<li class="dotList"></li>
<li class="dotList"></li>
</ul>
<div>
<input type="button" value="left" class="cLeft" />
<input type="button" value="right" class="cRight" />
</div>'Programing > HTML' 카테고리의 다른 글
| [CSS3] CSS Animation (0) | 2014.02.26 |
|---|---|
| [CSS3] CSS 3D Transforms (0) | 2014.02.26 |
| [CSS3] CSS 2D Transforms (0) | 2014.02.26 |
| [CSS3] CSS Transitions (0) | 2014.02.26 |
| [JS] 스크롤시 사라지는 jQuery 배너 플러그인 (0) | 2013.07.30 |
| [JS] HTML5 WebStorage (0) | 2013.06.28 |
| [JS] IOS Safari에서 화면회전시 가로 스크롤이 생기는 버그 해결방법 (0) | 2013.06.26 |
| [JS] 브라우저에서 마우스 우클릭을 사용하지 못하도록 하기 (0) | 2013.06.26 |
| [JS] input타입이 파일인 항목을 ajaxForm으로 전달하기 (0) | 2013.06.26 |
| [JS] Key Event 처리하기 (0) | 2013.06.26 |
