같은소스로 자동슬라이드 두개만드는 방법...
본문
안녕하세요..
도저히 답이 나오질않아 질문드립니다. ㅠㅠ
현재 자동슬라이드 배너를 만들고 있는데요..
동일한 제이쿼리 소스를 가지고
자동슬라이드를 두세트 만드는건 어떻게 해야되는건가요..ㅠㅠ
(each함수를 이용하라는 분이 계셔서 시도해봤는데... 답이 안나오네요..)
클래스명을 다르게해주면 소스가 뒤죽박죽 되버려요..
제발 도와주세요 ㅠㅠ
<소스첨부>
[html]
<div class="gallery_box01">
<p>기술교육갤러리</p>
<div class="mcBanC">
<ul class="mcBanSlides">
<li><a href="#"><img src="images/gallery01_01.png" akt=""></a></li>
<li><a href="#"><img src="images/gallery01_02.png" akt=""></a></li>
<li><a href="#"><img src="images/gallery01_03.png" akt=""></a></li>
</ul>
</div>
<ul class="mcBanDot">
<li><img src="images/slide_dot_.png" alt="" /></li>
<li><img src="images/slide_dot.png" alt="" /></li>
<li><img src="images/slide_dot.png" alt="" /></li>
</ul>
</div><!--gallery_box01-->
<div class="gallery_box02">
<p>기술교육갤러리</p>
<div class="mcBanC02">
<ul class="mcBanSlides02">
<li><a href="#"><img src="images/gallery02_01.png" akt=""></a></li>
<li><a href="#"><img src="images/gallery02_02.png" akt=""></a></li>
<li><a href="#"><img src="images/gallery02_03.png" akt=""></a></li>
</ul>
</div>
<ul class="mcBanDot02">
<li><img src="images/slide_dot_.png" alt="" /></li>
<li><img src="images/slide_dot.png" alt="" /></li>
<li><img src="images/slide_dot.png" alt="" /></li>
</ul>
</div><!--gallery_box02-->
[css]
/*작은 배너(자동슬라이드)*/
.gallery_box01{width:590px; height:370px; border:1px solid #ccc; margin-top:40px; position: relative;}
.gallery_box01>p{font-size:20px; color:#333; position:absolute; top:50px; left:50px;}
.mcBanC { width:498px; height:244px; overflow:hidden; position:relative; top:99px; left:0; right:0; bottom:0; margin:auto;}
.mcBanSlides { width:498px; height:244px; position:absolute; }
.mcBanSlides li { width:498px; float:left; }
.mcBanDot { cursor:pointer; position:absolute; top:57px; right:40px;}
.mcBanDot li { margin:0 3px; float:left; }
.gallery_box02{width:590px; height:370px; border:1px solid #ccc; margin-top:40px; position: relative;}
.gallery_box02>p{font-size:20px; color:#333; position:absolute; top:50px; left:50px;}
.mcBanC02 { width:498px; height:244px; overflow:hidden; position:relative; top:99px; left:0; right:0; bottom:0; margin:auto;}
.mcBanSlides02 { width:498px; height:244px; position:absolute; }
.mcBanSlides02 li { width:498px; float:left; }
.mcBanDot02 { cursor:pointer; position:absolute; top:57px; right:40px;}
.mcBanDot02 li { margin:0 3px; float:left; }
[JS]
var $list = $('ul.mcBanSlides');
var size = $list.children().outerWidth();
var len = $list.children().length;
var speed = 5000;
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;
}
})
$('.mcBanDot').children().bind({
'click': function(){
var idx = $('.mcBanDot').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 = $('.mcBanDot').children().find('img').attr('src').replace('_.png','.png');
$('.mcBanDot').children().find('img').attr('src',source2);
var source = $('.mcBanDot').children().find('img').attr('src').replace('.png','_.png');
$('.mcBanDot').children().eq(cnt).find('img').attr('src',source);
cnt++;
};
