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

</p>

<p><!DOCTYPE html>

<html lang="ko-KR">

<head>

 <title>UI Laboratory</title>

 <meta charset="utf-8" /></p>

<p> <link rel="stylesheet" type="text/css" href="common.css" />

<script type="text/javascript" src="jquery-1.7.1.min.js"></script></p>

<p> <!--[if lt IE 9]>

  <script src="<a href="<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script" target="_blank" rel="noopener noreferrer">http://html5shiv.googlecode.com/svn/trunk/html5.js"></script</a>"><a href="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script" target="_blank" rel="noopener noreferrer">http://html5shiv.googlecode.com/svn/trunk/html5.js"></script</a></a>>

 <![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></p>

<p><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></p>

<p><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> </p>

<p><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;</p>

<p> $list.css('width',len*size);</p>

<p> if(auto) timer = setInterval(autoSlide, speed);</p>

<p> $list.children().bind({

  'mouseenter': function(){

   if(!auto) return false;

   clearInterval(timer);

   auto = false;

  },

  'mouseleave': function(){

   timer = setInterval(autoSlide, speed);

   auto = true;

  }

 })</p>

<p> $('.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;

  }

 });  </p>

<p> function autoSlide(){

  if(cnt>len-1){

   cnt = 0;

  }</p>

<p>  $list.animate({'left': -(cnt*size)+'px' },'normal');</p>

<p>  var source2 = $('.bt-roll').children().find('img').attr('src').replace('_.png','.png');

  $('.bt-roll').children().find('img').attr('src',source2);</p>

<p>  var source = $('.bt-roll').children().find('img').attr('src').replace('.png','_.png');

  $('.bt-roll').children().eq(cnt).find('img').attr('src',source);</p>

<p>  cnt++;

 }

</script>

</body>

</html></p>

<p>
http://wappleedu.com/">http://wappleedu.com/ 보시면 슬라이딩 이미지하단을 비롯하여다른곳에 여백이 없어야 합니다.
어디를 수정해야 할까요?
index페이지의 여백을 빼고 싶습니다. 채택완료

답변 1개

index페이지의 여백을 빼고 싶습니다. 채택완료

답변 1개

공유하기
