index페이지의 여백을 빼고 싶습니다.

Copy
<!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/ 보시면 슬라이딩 이미지하단을 비롯하여다른곳에 여백이 없어야 합니다.
어디를 수정해야 할까요?
index페이지의 여백을 빼고 싶습니다.

답변 1개

공유하기
