index페이지의 여백을 빼고 싶습니다.
본문
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<title>UI Laboratory</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="common.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
.mainimg-wrap {
position: relative;
width: 685px;
height: 347px;
margin: 0;
overflow: hidden;
padding: 0px;
}
.mainimg-wrap ul.mainimg {
position: absolute;
height: 347px;
width: 685px;
margin: 0px;
padding: 0px;
}
.mainimg-wrap ul.mainimg li {float:left; width:685px;}
ul.bt-roll {
width: 685px;
height: -20px;
margin: 0px;
padding: 0px;
}
ul.bt-roll li {float:left; margin-right:5px;}
</style>
</head>
<body>
<div class="mainimg-wrap">
<ul class="mainimg clfix">
<li><a href="#"><img src="../wappleimg/main1.jpg" alt="" width="685" height="347"></a></li>
<li><a href="#"><img src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
<li><a href="#"><img src="../wappleimg/main3.jpg" alt="" width="685" height="347"></a></li>
<li><a href="#"><img src="../wappleimg/main1.jpg" alt="" width="685" height="347"></a></li>
<li><a href="#"><img src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
<li><a href="#"><img src="../wappleimg/main3.jpg" alt="" width="685" height="347"></a></li>
</ul>
</div>
<ul class="bt-roll">
<li><a href="#"><img src="../../wappleimg/btn_circle_.png" alt=""></a></li>
<li><a href="#"><img src="../../wappleimg/btn_circle.png" alt=""></a></li>
<li><a href="#"><img src="../../wappleimg/btn_circle.png" alt=""></a></li>
<li><a href="#"><img src="../../wappleimg/btn_circle.png" alt=""></a></li>
<li><a href="#"><img src="../../wappleimg/btn_circle.png" alt=""></a></li>
<li><a href="#"><img src="../../wappleimg/btn_circle.png" alt=""></a></li>
</ul>
<script type="text/javascript">
var $list = $('ul.mainimg');
var size = $list.children().outerWidth();
var len = $list.children().length;
var speed = 2000;
var timer = null;
var auto = true;
var cnt = 1;
$list.css('width',len*size);
if(auto) timer = setInterval(autoSlide, speed);
$list.children().bind({
'mouseenter': function(){
if(!auto) return false;
clearInterval(timer);
auto = false;
},
'mouseleave': function(){
timer = setInterval(autoSlide, speed);
auto = true;
}
})
$('.bt-roll').children().bind({
'click': function(){
var idx = $('.bt-roll').children().index(this);
cnt = idx;
autoSlide();
return false;
},
'mouseenter': function(){
if(!auto) return false;
clearInterval(timer);
auto = false;
},
'mouseleave': function(){
timer = setInterval(autoSlide, speed);
auto = true;
}
});
function autoSlide(){
if(cnt>len-1){
cnt = 0;
}
$list.animate({'left': -(cnt*size)+'px' },'normal');
var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');
$('.bt-roll').children().find('img').attr('src',source2);
var source = $('.bt-roll').children().find('img').attr('src').replace('.png','_.png');
$('.bt-roll').children().eq(cnt).find('img').attr('src',source);
cnt++;
}
</script>
</body>
</html>
http://wappleedu.com/ 보시면 슬라이딩 이미지하단을 비롯하여다른곳에 여백이 없어야 합니다.
어디를 수정해야 할까요?
답변을 작성하시기 전에 로그인 해주세요.
