크롬80버전 결제 이슈, 영카트5 주요패치 확인!

슬라이드 버튼수정

그누보드5
영카트5
매뉴얼
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
슬라이드 버튼수정

QA

가정의 달 맞이 SIR 컨텐츠몰 10% 특별할인 - 코로나19 바이러스로 어려운 시기, SIR이 함께 하겠습니다.

슬라이드 버튼수정

본문

이미지 슬라이드 소스입니다. 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;}

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 87,741 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT