이미지 자동 슬라이드 구현 질문입니다. 채택완료
이미지 슬라이드 구현은 되는데
자동으로 구현이 되질 않습니다. 자동구현도 되도록 한번 봐주실 수 있으신가요?
부탁드립니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.fadeX {width:100%; float:left;}
.fadeX .photo {overflow:hidden; margin:0 auto; width:100%; height:500px; position:relative;}
.fadeX .photo span {display:block; padding-top:5px; text-align:right;}
.fadeX .photo ul {text-align:left; height:100%; position:relative;}
.fadeX .photo ul li {float:left; text-align:center; display:none; width:100%; height:470px; position:relative; background:url("img01.jpg") center;}
.fadeX .btn {padding-top:0; position:relative; clear:both; width:1100px; margin:0 auto; text-align:center;}
.fadeX .btn li {display:inline; padding:0 5px; cursor:pointer;}
.fadeX .btn li img {border:1px solid #ccc; width:200px;}
.fadeX .btn li.on img {border:2px solid #ff5555; width:200px;}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
//클릭상품
$(function(){
autoplay:true;
autoplaySpeed:2000;
var btn = $(".fadeX .btn li");
var list = $(".fadeX .photo li");
list,btn.each(function(){
var ind = $(this).index()-1;
ind++;
$(this).click(function(){
list.hide().eq(ind).fadeIn();
btn.removeClass().eq(ind).addClass("on");
});
});
list.eq(0).show();
btn.eq(0).addClass("on");
});
});
</script>
</head>
<body>
<div class="fadeX">
<div class="photo">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="btn">
<li><img src="bt_01.jpg" alt=""></li>
<li><img src="bt_01.jpg" alt=""></li>
<li><img src="bt_01.jpg" alt=""></li>
<li><img src="bt_01.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
답변 2개
</p><p> btn.each(function(idx_){</p><p> var ind = $(this).index()-1;</p><p> ind++;</p><p> $(this).click(function(){</p><p> idx = idx_;</p><p> list.hide().eq(ind).fadeIn();</p><p> btn.removeClass().eq(ind).addClass("on");</p><p> });</p><p> });</p><p>이부분을 수정하시면 될 듯요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
제가 질문의 요지를 이해하지 못해서 그런데요
이런걸 말씀하시는지..
</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/loose.dtd</a>"><a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank" rel="noopener noreferrer">http://www.w3.org/TR/html4/loose.dtd</a></a>"></p><p><html></p><p> <head></p><p> <title> New Document </title></p><p> <meta name="Generator" content="EditPlus"></p><p> <meta name="Author" content=""></p><p> <meta name="Keywords" content=""></p><p> <meta name="Description" content=""></p><p><style></p><p>.fadeX {width:100%; float:left;}</p><p>.fadeX .photo {overflow:hidden; margin:0 auto; width:100%; height:500px; position:relative;}</p><p>.fadeX .photo span {display:block; padding-top:5px; text-align:right;}</p><p>.fadeX .photo ul {text-align:left; height:100%; position:relative;}</p><p>.fadeX .photo ul li {float:left; text-align:center; display:none; width:100%; height:470px; position:relative; background:url("img01.jpg") center;}</p><p>.fadeX .btn {padding-top:0; position:relative; clear:both; width:1100px; margin:0 auto; text-align:center;}</p><p>.fadeX .btn li {display:inline; padding:0 5px; cursor:pointer;}</p><p>.fadeX .btn li img {border:1px solid #ccc; width:200px;}</p><p>.fadeX .btn li.on img {border:2px solid #ff5555; width:200px;}</p><p></style></p><p>
</p><p><script src="<a href="<a href="http://code.jquery.com/jquery-1.4.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.4.2.min.js</a>"><a href="http://code.jquery.com/jquery-1.4.2.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.4.2.min.js</a></a>"></script></p><p><script></p><p> //클릭상품</p><p> $(function(){</p><p> autoplay:true;</p><p> autoplaySpeed:2000;</p><p> var btn = $(".fadeX .btn li");</p><p> var list = $(".fadeX .photo li");</p><p> var idx = 0;</p><p> btn.each(function(){</p><p> var ind = $(this).index()-1;</p><p> ind++;</p><p> $(this).click(function(){</p><p> list.hide().eq(ind).fadeIn();</p><p> btn.removeClass().eq(ind).addClass("on");</p><p> });</p><p> });</p><p> list.eq(0).show();</p><p> btn.eq(0).addClass("on");</p><p> setInterval(function() {</p><p> idx++;</p><p> if (idx === (btn.length - 0))</p><p> idx = 0;</p><p> btn[idx].click();</p><p> }, 1000);</p><p>});</p><p>
</p><p></script></p><p> </head></p><p> <body></p><p>
</p><p> <div class="fadeX"></p><p> <div class="photo"></p><p> <ul></p><p> <li></li></p><p> <li></li></p><p> <li></li></p><p> <li></li></p><p> </ul></p><p> </div></p><p> <ul class="btn"></p><p> <li><img src="bt_01.jpg" alt=""></li></p><p> <li><img src="bt_01.jpg" alt=""></li></p><p> <li><img src="bt_01.jpg" alt=""></li></p><p> <li><img src="bt_01.jpg" alt=""></li></p><p> </ul></p><p> </div></p><p>
</p><p> </body></p><p></html></p><p>답변에 대한 댓글 1개
한가지만 더 부탁해도 될런지요..
자동슬라이드가 되고 있을때 2번째 버튼을 누르면 다음 자동이 될때 그 다음부터
슬라이드가 진행이 되었으면 좋겠습니다..!!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인