슬라이드 버튼수정

슬라이드 버튼수정

QA

슬라이드 버튼수정

본문

이미지 슬라이드 소스입니다. https://sunfl2000.cafe24.com/dot_slide.htm 의 좌측하단 버튼을

이미지 아래쪽 위로 걸치게 하고 싶습니다.

http://designinvent.co.kr 처럼요 도와주십시오 난감합니다.


<!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: 684px;
 margin: 0px;
 padding: 0px;
 left: 0px;
 top: 0px;
}
 .mainimg-wrap ul.mainimg li {float:left;}
 
 ul.bt-roll {
 position:absolute;
 z-index:10000;
 width: 685px;
 top:330px;
 text-align:center;
}
  ul.bt-roll li {display: inline-block; margin-right:5px;}
</style>
</head>
<body>
<div class="mainimg-wrap">
  <ul class="mainimg clfix">
  <li><a href="../../s3-1.html" class="mainimg-wrap"><img src="../wappleimg/main1.jpg" alt="" width="685" height="347"></a></li>
  <li><a href="http://focam.co.kr"><img src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
  <li><a href="http://wappleshop.com"><img src="../wappleimg/main3.jpg" alt="" width="685" height="347"></a></li>
  <li><a href="../../p2-1.html"><img src="../wappleimg/main1.jpg" alt="" width="685" height="347"></a></li>
  <li><a href="http://focam.co.kr"><img src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
  <li><a href="http://wappleshop.com"><img src="../wappleimg/main3.jpg" alt="" width="685" height="347"></a></li>
  </ul>
<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>
</div> 
<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>

이 질문에 댓글 쓰기 :

답변 2

ul.bt-roll {position:relative; margin-top:-20px !important;}

    ul.bt-roll {width:980px; margin:0 auto; margin-top:-20px;}

답변을 작성하시기 전에 로그인 해주세요.
전체 10,628
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT