jquery로 좌우 100%주는 법..ㅠ
관련링크
본문
jquery로 베너 작업중인데 이미지 슬라이드라 간단해요
아이폰홈페이지( www.apple.com/kr/iphone )처럼 좌우여백없이 100%로 할려고하는데;;;css를 잘몰라 width로 수정을 100%를 해도 계속 깨지고 있어요.ㅠㅠ
고수님들 부탁드리겠습니다.
<style type="text/css">
*{margin:0; padding:0;}
img{border:0 none;}
.slider_wrap{position:relative;margin:0 auto;width:780px;}
.slider_wrap .prev,.slider_wrap .next{display:none;position:absolute;top:50%;margin-top:-32px;padding:5px;background-color:#fff;z-index:10;}
.slider_wrap .prev{left:0px;border-top-right-radius:6px;border-bottom-right-radius:6px;}
.slider_wrap .next{right:0px;border-top-left-radius:6px;border-bottom-left-radius:6px;}
.slider_show{overflow:hidden;width:780px;position:relative;}
.slider_box{height:100%;margin-left:0;}
.slider_list{overflow:hidden;float:left;position:relative;width:780px;height:600px;}
.slider_nav{position:absolute;width:100%;bottom:30px;text-align:center;z-index:100;font-size:0;}
.slider_nav a{display:inline-block;width:12px;height:12px;margin:0 5px;border-radius:10px;background-color:#B5B5B5;}
.slider_nav a.on{background-color:#4295E8}
.btns{position:absolute;right:10px;bottom:10px;z-index:100}
.btns a{padding:3px 5px;text-decoration:none;background-color:#4295E8;color:#fff;font-size:16px;font-family: "Dotum","돋움","Arial","sans-serif";text-transform:uppercase;}
</style>
<script type="text/javascript">
$(function(){
/* 기본세팅 */
var $list = $(".slider_list");
var $box = $(".slider_box");
var wd = $list.width();
var num = $list.size();
var margin,current,play;
$box.width(wd*num);
for(i=0; i<num; i++){
var nav = '<a href="#" title="'+(i+1)+'번째로 이동"></a>'
$(".slider_nav").append(nav);
};
var $nav = $(".slider_nav a");
$(".slider_nav a:first").addClass("on");
setTimeout(function(){
play = setInterval(play_next,2000);
},3000)
$(".slider_wrap").hover(function(){
$(".prev,.next").show();
},function(){
$(".prev,.next").hide();
});
/* 반복할 이벤트 */
function play_next(){
margin = parseInt($box.css("margin-left"));
if(margin < -(wd*(num-2))){
$box.not(":animated").animate({"marginLeft":"0px"},"fast");
}else{
$box.not(":animated").animate({"marginLeft":"-="+wd+"px"},"fast");
};
//var current = Math.abs(margin/wd);
var current = Math.abs(Math.floor(margin/wd));
$nav.removeClass("on");
$nav.eq((current-num)+1).addClass("on");
}
function play_prev(){
clearInterval(play);
margin = parseInt($box.css("margin-left"));
if(margin == 0){
$box.not(":animated").animate({"marginLeft":"-"+wd*(num-1)+"px"},"fast");
}else{
$box.not(":animated").animate({"marginLeft":"+="+wd+"px"},"fast");
};
var current = Math.abs(Math.floor(margin/wd));
$nav.removeClass("on");
$nav.eq(current-1).addClass("on");
}
/* 버튼 */
$(".next").click(function(){
clearInterval(play);
play_next();
return false;
});
$(document).keydown(function(evt){
if (evt.keyCode==37){
play_prev();
}else if(evt.keyCode==39){
clearInterval(play);
play_next();
}
});
$(".prev").click(function(){
play_prev();
return false;
});
$nav.click(function(){
clearInterval(play);
$nav.removeClass("on");
$(this).addClass("on");
$box.not(":animated").animate({
"marginLeft":-wd*($(this).index())
});
return false;
});
$(".play").click(function(){
clearInterval(play);
play = setInterval(play_next,2000);
return false;
});
$(".stop").click(function(){
clearInterval(play);
return false;
});
/*
$(".slider_wrap").mouseenter(function(){
clearInterval(play);
}).mouseleave(function(){
play = setInterval(play_next,3000);
});
*/
});
</script>
<div class="slider_wrap">
<a href="#" class="prev" title="이전"><img src="<?php echo G5_IMG_URL ?>/main_left.png" alt="prev" /></a>
<a href="#" class="next" title="다음"><img src="<?php echo G5_IMG_URL ?>/main_right.png" alt="next" /></a>
<div class="slider_show">
<!-- slider_box -->
<div class="slider_box">
<div class="slider_list">
<div class="custom_pic">
<img src="img/banner1.gif" alt="img01" />
</div>
</div>
<div class="slider_list">
<div class="custom_pic">
<img src="http://zinoui.com/app/web/img/landing/html5-canvas-library.png" alt="img02" />
</div>
</div>
<div class="slider_list">
<div class="custom_pic">
<img src="http://zinoui.com/app/web/img/landing/html5-svg-library.png" alt="img03" />
</div>
</div>
<div class="slider_list">
<div class="custom_pic">
<img src="http://zinoui.com/app/web/img/landing/php-server-helpers.png" alt="img04" />
</div>
</div>
</div>
<!-- //slider_box -->
<!-- slider_nav -->
<div class="slider_nav"></div>
<!-- //slider_nav -->
<div class="btns">
<a href="#" class="play">play</a>
<a href="#" class="stop">stop</a>
</div>
</div>
</div>