스크롤 롤링배너가 4개중 한개씩 위로 롤링되야 하는데 뭐가 문제이지 4개자체가 한꺼번에 올라갑니다.
관련링크
본문
현재제작중인 샘플site
<script type="text/javascript">
$(function(){
function latestCardBanner(){
var dir=-1;
var count=1;
var num=$(".card_banner_wrap > ul > li").length; // li 갯수
var animatedly = false;
function roll(direct){
var bbi=$(".card_banner_wrap").height(); // ul을 감싸는 div
if(animatedly == true ) {
return;
}
animatedly = true;
if (direct != -1){
$(".card_banner_wrap ul > li:last-child").prependTo($(".card_banner_wrap > ul"));
$(".card_banner_wrap ul").css("margin-top", -bbi );
$(".card_banner_wrap ul").stop().animate({"marginTop":0},800,function(){
animatedly = false;
});
}else{
$(".card_banner_wrap ul").stop().animate({"marginTop":-bbi},800,function(){
$(">li:first-child",this).appendTo($(this));
$(".card_banner_wrap ul").css("margin-top",0);
animatedly = false;
});
}
};
// 배너 2개 이상일때 3초 자동롤링 실행
var autoRoll = null;
function rnSaleBnrRoll(){
if ($(".card_banner_wrap ul > li").length > 1){ // 배너가 두개부터 실행
autoRoll=setInterval(function(){
roll(-1);
if (count<num){ // 자동롤링 중 li 갯수가 1보다 클때 실행
count++
}else{ // 자동롤링 중 li 갯수가 1보다 작거나 같을 때 실행
count=0;
};
},9000);
};
};
// 마우스 오버시 정지, 높이값 커짐
if ($(".card_banner_wrap ul > li").length > 1){
$(".card_banner_wrap ul").on("mouseenter", function(){
clearInterval(autoRoll);
$(this).parents(".card_banner_wrap").stop().animate({height:$(this).find("li").height()*$(this).find("li").length+"px"}, 135);
$(this).parents(".card_banner_wrap").addClass("on");
$(".card_banner_wrap .card_banner_btn").hide();
}).on("mouseleave", function(){
$(this).parents(".card_banner_wrap").stop().animate({height:$(this).find("li").height()+"px"}, 135);
$(this).parents(".card_banner_wrap").removeClass("on");
$(".card_banner_wrap .card_banner_btn").show();
rnSaleBnrRoll()
});
};
// 버튼
$(".card_banner_wrap > span.card_banner_btn a").click(function(){
clearInterval(autoRoll);
if($(this).index()==0) dir=1; else dir=-1; //(화살표) 위아래 방향기능
roll(dir); //(화살표) 위아래 방향기능
autoRoll=setInterval(function(){
roll(-1);
if(dir==-1){
if(count<num) count++;else count=0;
}else{
if(count>0) count--; else count=num;
}
}, 9000);
});
// 배너 2개 이상일때 자동롤링 함수 실행
rnSaleBnrRoll();
// 배너 1개일 경우 버튼 비노출 처리
if ($(".card_banner_wrap ul > li").length > 1){
$(".card_banner_wrap .card_banner_btn").css("display","block");
}else {
$(".card_banner_wrap .card_banner_btn").css("display","none");
}
};
latestCardBanner();
});
</script>
답변 1
앞으로 가능하면 code로 감싸서 보기 좋게 넣어 주세요.
코드를 보면 실제로 동작되는 곳이 roll(), rnSaleBnrRoll() 이럼 함수에서 처리되네요.
자바스크립트 영역이니 print로 각 변수값을 찍어 가면서 디버깅해 보세요
