제이쿼리 롤링 관련 질문

제이쿼리 롤링 관련 질문

QA

제이쿼리 롤링 관련 질문

본문

var leftCt = 0;
 $(function(){
  $("#imgList").attr("top", "0");
  imgStart("R");
 });
 function imgStart(tp){
  clearInterval($("#imgList").attr("timer"));
  if(tp == "R"){ // 오른쪽 이동
   imgRight();
   $("#imgList").attr("timer", setInterval("imgRight()", 4000)); // 멈춰있는 시간
  }else{ // 왼쪽이동
   if(leftCt == 0){
    var leng = $("#imgList div").size();
    $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
    $("#imgList>.rollingImg").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
    $("#imgList>.rollingImg").eq(leng).remove();
    leftCt = 1;
   }
   imgLeft();
   $("#imgList").attr("timer", setInterval("imgLeft()", 3000));
  }
 }
 function imgRight(){
  $("#imgList").animate({
   left : parseInt($("#imgList .rollingImg").eq(0).width() * -1)
  },300,function(){
   $("#imgList").css("left", "0px");
   $("#imgList>.rollingImg").eq(0).clone().appendTo($("#imgList"));
   $("#imgList>.rollingImg").eq(0).remove();
  });
 }
 function imgLeft(){
  var leng = $("#imgList .rollingImg").size();
  $("#imgList").animate({
   left : 0
  },300,function(){
   $("#imgList").css("left", "0px");
   $("#imgList").css("left",parseInt($("#imgList .rollingImg").eq(0).width()*-1));
   $("#imgList>.rollingImg").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
   $("#imgList>.rollingImg").eq(leng).remove();
  });
 }


 

위 제이쿼리 소스이구요

상품이 여러개가 슬라이드되는 형식인데요 

< ㅁㅁㅁㅁㅁ >

이런식으로 상품 5개가 있으면 자동으로 롤링이 잘 됩니다.

하지만 5개 이하로 설정해버리면 오른쪽으로는 잘되는데 왼쪽으로는 에러가 생깁니다.

 

자동으로 롤링이 되는 형식인데

혹시 특정 갯수 이하면 롤링기능이 작동을 안하고

특정 갯수 이상되면 다시 자동 롤링 기능이 되도록 방법이 있을까요?

좋은 하루 되세요!

 

이 질문에 댓글 쓰기 :

답변 2

id 값인 imgList 가 롤링되는 엘리먼트 같습니다.

length 등으로 해당 imgList 의 자식 롤링요소 .rollingImg 클래스의 갯수를 확인하시어

imgStart 함수 호출전에 if 문 등으로 롤링갯수를 체크하셔서 롤링을 기존처럼 호출하시거나

호출하지 않거나 하면 될것같습니다.

jQuery(document).ready(function() {
   
var slidecount = jQuery('.rollingImg',this).length;
   
if ( slidecount < 6 ) {
$("#butten_prev, #butten_next").hide();
    }

이렇게 6개 이하면 좌우 버튼이 안나오게는했는데
6개 이하로는 롤링 안되도록 호출하는걸 해결이 안되네요ㅠㅠ

imgStart("R"); <---시작이 이것 같네요

if ( slidecount > 5 ) imgStart("R");

 

<script>
jQuery(document).ready(function() {
   
var slidecount = jQuery('.slide_item',this).length;
   
if ( slidecount < 6 ) {
$("#butten_prev, #butten_next").hide();
    }

if ( slidecount > 5 ) imgStart("R");

});
</script>

5개보다 많을경우 슬라이드가 되는것같은데
상품을 한개로 설정했는데도 롤링이 되네요... ㅠ^ㅠ

혹시 마우스 오버시 멈추는 걸 서처해서 찾아서

$(function(){
    $("#album").attr("top", "0");
    imgStart("R");

    //아래는 가독성을 위해 줄바꿈을 했음. 따라서 점(.), 세미콜론(;) 등이 하나 있고 없음에도 안될 수 있으니 주의해서 사용
    $("#imgList")
        .mouseenter(function() { imgStop(); })
        .mouseleave(function() { imgStart("R"); });
});
function imgStop() {
    clearInterval($("#imgList").attr("timer"));
}
function imgStart(tp){

    //clearInterval($("#imgList").attr("timer")); //아래 imgStop()으로 대체
    imgStop();
    $("#imgList").attr("timer", setInterval("imgRight()", 4000)); // 멈춰있는 시간
    if(tp == "R"){ // 오른쪽 이동

        ...

        이하 내용 같음
    }
}

적용시켰는데
오른쪽으로 이동시 오버 하면 멈췄다 다시 롤링이 되는데요
왼쪽으로 이동 버튼 클릭 후 왼쪽으로 롤링상태에서 오버시 멈춘뒤 오버를 안할시
왼쪽으로 이동이 계속되야하는데 처음처럼 오른쪽으로 롤링 되는데
왼쪽으로 이동하는 부분에 추가적으로 내용을 넣어야할까요??

답변을 작성하시기 전에 로그인 해주세요.
전체 29
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT