이미지 자동 슬라이드 구현 질문입니다.
본문
이미지 슬라이드 구현은 되는데
자동으로 구현이 되질 않습니다. 자동구현도 되도록 한번 봐주실 수 있으신가요?
부탁드립니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "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
btn.each(function(idx_){
var ind = $(this).index()-1;
ind++;
$(this).click(function(){
idx = idx_;
list.hide().eq(ind).fadeIn();
btn.removeClass().eq(ind).addClass("on");
});
});
이부분을 수정하시면 될 듯요
아 진짜 너무너무너무너무 감사합니다!!!! 최고십니다!!!!
제가 질문의 요지를 이해하지 못해서 그런데요
이런걸 말씀하시는지..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "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");
var idx = 0;
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");
setInterval(function() {
idx++;
if (idx === (btn.length - 0))
idx = 0;
btn[idx].click();
}, 1000);
});
</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번째 버튼을 누르면 다음 자동이 될때 그 다음부터
슬라이드가 진행이 되었으면 좋겠습니다..!!
