<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<style>
body{margin:0;padding:0;}
ul, li{list-style:none;padding:0;}
.btn_wrap{width:100%; position:absolute;z-index:1;top:100px;}
.btn{width:970px; margin:0 auto ;}
.btn ul li{float:left;width:50%;}/*left button*/
.btn ul li:nth-child(2){text-align:right;}/*right button*/
.img_div{width:970px; margin:0 auto;text-align:center;}
.slideWrap {margin:0 auto; width:800px; height:504px; overflow:hidden; position:relative;}
#slide1 {position:absolute;}
#slide1 ul li {
margin: 0 0 0 0;
padding: 0 10 0 0;
border : 0;
float: left;
}
</style>
<script src="http://devcms.compa.kr/src/js/jquery-git2.js"></script>
<script src="http://devcms.compa.kr/src/js/jquery-ui-1.9.2.custom.js"></script>
<script>
function slider_type_001( dataSliderId, img_width, img_padding, btnPrevId, btnNextId )
{
// var img_width = 800;
// var img_padding = 10;
var slideCnt = jQuery("#" + dataSliderId + " ul li").length;
var slideWidth = img_width + img_padding;
var slideConteinerWidth = slideWidth * slideCnt;
var nowSlide = 0;
jQuery('#' + dataSliderId ).width( slideConteinerWidth + "px" );
jQuery("#" + btnPrevId).click(function(){
if( nowSlide > 0 )
{
nowSlide = nowSlide - 1;
jQuery('#' + dataSliderId ).animate(
{left:"+=" + slideWidth + "px"}
,"slow"
,function()
{
var obj = jQuery( "#" + dataSliderId ).offset();
});
}// end if
});
jQuery("#" + btnNextId).click(function(){
if( nowSlide < ( slideCnt - 1 ) )
{
nowSlide = nowSlide + 1;
jQuery('#' + dataSliderId ).animate(
{left:"-=" + slideWidth + "px"}
,"slow"
,function()
{
var obj = jQuery( "#" + dataSliderId ).offset();
});
}// end if
});
}// end function
jQuery(document).ready(function()
{
slider_type_001( 'slide1', 800, 10, 'btnPrev1', 'btnNext1' );
});
</script>
<BODY>
<div class="btn_wrap">
<div class="btn">
<ul>
<li><img id="btnPrev1" src="http://gfdesign.kr/js_sorce/img01/arrow_left.png"></li>
<li><img id="btnNext1" src="http://gfdesign.kr/js_sorce/img01/arrow_right.png"></li>
</ul>
</div>
</div>
<div class="slideWrap">
<div id="slide1" style="border: 0px solid red;">
<ul>
<li><img src="http://gfdesign.kr/js_sorce/img01/1.jpg"></li>
<li><img src="http://gfdesign.kr/js_sorce/img01/2.jpg"></li>
<li><img src="http://gfdesign.kr/js_sorce/img01/3.jpg"></li>
<li><img src="http://gfdesign.kr/js_sorce/img01/4.jpg"></li>
<li><img src="http://gfdesign.kr/js_sorce/img01/5.jpg"></li>
<ul>
</div>
</div>
</BODY>
</HTML>
'!!...JS-HTML' 카테고리의 다른 글
| [javascript] 콜백 함수의 활용 (0) | 2017.02.23 |
|---|---|
| HTML + JAVASCRIPT - 동영상 배경 페이지 구축 샘플 코드 (0) | 2017.01.05 |
| [javascript]jQuery 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기 (0) | 2016.11.29 |
| HTML OGP ( URL 미리보기 설정 - 카카오톡, 페이스북, 네이버블러그 ) (0) | 2015.12.16 |
| javascript jQueryui tabs 활용 예제 (0) | 2015.03.27 |