슬라이드 버튼수정 채택완료
디자인아루즈
5년 전
조회 2,315
이미지 슬라이드 소스입니다. https://sunfl2000.cafe24.com/dot_slide.htm">https://sunfl2000.cafe24.com/dot_slide.htm 의 좌측하단 버튼을
이미지 아래쪽 위로 걸치게 하고 싶습니다.
http://designinvent.co.kr">http://designinvent.co.kr 처럼요 도와주십시오 난감합니다.
</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: 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;
}</p>
<p> ul.bt-roll li {display: inline-block; margin-right:5px;}</p>
<p></style>
</head>
<body></p>
<p><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="<a href="<a href="http://focam.co.kr"><img" target="_blank" rel="noopener noreferrer">http://focam.co.kr"><img</a>"><a href="http://focam.co.kr"><img" target="_blank" rel="noopener noreferrer">http://focam.co.kr"><img</a></a> src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
<li><a href="<a href="<a href="http://wappleshop.com"><img" target="_blank" rel="noopener noreferrer">http://wappleshop.com"><img</a>"><a href="http://wappleshop.com"><img" target="_blank" rel="noopener noreferrer">http://wappleshop.com"><img</a></a> 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="<a href="<a href="http://focam.co.kr"><img" target="_blank" rel="noopener noreferrer">http://focam.co.kr"><img</a>"><a href="http://focam.co.kr"><img" target="_blank" rel="noopener noreferrer">http://focam.co.kr"><img</a></a> src="../wappleimg/main2.jpg" alt="" width="685" height="347"></a></li>
<li><a href="<a href="<a href="http://wappleshop.com"><img" target="_blank" rel="noopener noreferrer">http://wappleshop.com"><img</a>"><a href="http://wappleshop.com"><img" target="_blank" rel="noopener noreferrer">http://wappleshop.com"><img</a></a> src="../wappleimg/main3.jpg" alt="" width="685" height="347"></a></li>
</ul></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>
</div> </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>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
디자인아루즈
5년 전
해봤는데 안됩니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인