slidebanner.js
샘플영상
다운로드
slidebanner.js V2.1 다운로드설치/사용법
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>
<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<div id="banner1">
<div class="container">
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
</div>
</div>
1. 제이쿼리 설치가 필요 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>
<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<div id="banner1">
<div class="container">
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
</div>
</div>
2. 다운로드 받은 플러그인을 설치 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>
<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<div id="banner1">
<div class="container">
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
</div>
</div>
3. 배너 레이아웃 및 스타일을 작성 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/slidebanner.js"></script>
<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>
<script>
$(function(){
$('#banner1').slidebanner({
page:true,
arrow:{left:'◀',right:'▶'},
auto:true,
speed:3000,
delay:3000
});
});
</script>
<div id="banner1">
<div class="container">
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
<div><a href="#"><!-- 배너이미지 --></a></div>
</div>
</div>
4. 페이지가 열릴때 플러그인 자동으로 실행될 수 있도록 함수를 작성 합니다.
$(function(){
$('#banner1').slidebanner({
page:true, //페이지를 사용여부 설정
arrow:{left:'◀',right:'▶'}, //좌우 이동 사용 여부 및 버튼 모양 설정
auto:true, //배너를 자동으로 동작 여부 설정
speed:3000, //배너 변경시 속도 설정
delay:3000, //배너가 멈추어 있는 시간 설정
pagecolor:'#eeeeee', //전체 페이지의 색
pageoncolor:'#3af939' //현재 배너를 나타내는 페이지의 색
});
});
5. 옵션을 설정 합니다.