그누보드 QA - 슬라이드 버튼수정

슬라이드 버튼수정

디자인아루즈 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2020.02.07 16:51:22 조회 2059 (119.♡.♡.85)

본문

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