제이쿼리 롤링 관련 질문
본문
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개보다 많을경우 슬라이드가 되는것같은데
상품을 한개로 설정했는데도 롤링이 되네요... ㅠ^ㅠ
var leng = $("#imgList .rollingImg").size(); <-- 이미지 갯수 같네요
개수가 맞게나오는지 확인을 해보세요
alert( leng)
alert(slidecount)
alert(slidecount)
넣으니 설정한 상품 갯수로 나오네요.
말씀해주신
if ( slidecount > 5 ) imgStart("R");
5개 이상일때 롤링이 시작되는게 맞는데
이해가 안되네요..
안되면 다음 함수에도 넣으세요
function imgRight(){
if($("#imgList .rollingImg").length < 6) return;
function imgLeft(){
var leng = $("#imgList .rollingImg").size();
if(leng <6) return;
감사합니다. 해결됐습니다^^
혹시 마우스 오버시 멈추는 걸 서처해서 찾아서
$(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"){ // 오른쪽 이동
...
이하 내용 같음
}
}
적용시켰는데
오른쪽으로 이동시 오버 하면 멈췄다 다시 롤링이 되는데요
왼쪽으로 이동 버튼 클릭 후 왼쪽으로 롤링상태에서 오버시 멈춘뒤 오버를 안할시
왼쪽으로 이동이 계속되야하는데 처음처럼 오른쪽으로 롤링 되는데
왼쪽으로 이동하는 부분에 추가적으로 내용을 넣어야할까요??
