제이쿼리 스크립트 고수님들께 문의드립니다. 채택완료
히어1
8년 전
조회 2,146
아래는 탭 슬라이드 스크립트입니다.
첫번째와 그외 정지되어있는 시간을 별도로 하고 싶은데요....
즉, for문의 0 인경우는 지연시간 100초
그외 1~ 나머지는 지연시간 5초 이렇게 지연시간을 두개로 나눠 설정하고 싶은데
아래 코드에서 수정하면 가능한지 문의드립니다.
</p><p>(function(a){
a.fn.webwidget_scroller_tab=function(p){
var p=p||{};</p><p> var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"3000";
var s_w_p=p&&p.scroller_window_padding?p.scroller_window_padding:"0";
var s_w_w=p&&p.scroller_window_width?p.scroller_window_width:"30";
var s_w_h=p&&p.scroller_window_height?p.scroller_window_height:"270";
var s_h_t_c=p&&p.scroller_head_text_color?p.scroller_head_text_color:"blue";
var s_h_t_cc=p&&p.scroller_head_text_bgcolor?p.scroller_head_text_bgcolor:"";
var s_h_c_t_c=p&&p.scroller_head_current_text_color?p.scroller_head_current_text_color:"black";
var s_h_c_t_cc=p&&p.scroller_head_current_text_bgcolor?p.scroller_head_current_text_bgcolor:"ab0007";
var d=p&&p.directory?p.directory:"images";
var dom=a(this);
var s_length=dom.children(".tabBody").children("ul").children("li").length;
var timer;
var current = 0;
var li_width;
s_w_p += "px";
s_w_w += "px";
s_w_h += "px";
if(dom.find("ul").length==0||dom.find("li").length==0){
dom.append("Require content");
return null;
}
begin();
play();
function begin(){
dom.width(s_w_w);
dom.height(s_w_h);
li_width = parseInt(s_w_w);
dom.children(".tabBody").width(parseInt(s_w_w));
dom.children(".tabBody").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").width((parseInt(s_w_w))*s_length);
dom.children(".tabBody").children("ul").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").children("li").width(parseInt(s_w_w));
dom.children(".tabBody").children("ul").children("li").height(parseInt(s_w_h)-28-4);
dom.children(".tabBody").children("ul").children("li").children("p").css("padding",s_w_p);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c).css("background-color",s_h_t_cc);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").click(function(){
current = dom.children(".tabContainer").children(".tabHead").children("li").index($(this).parent());
play();
stop()
});
dom.hover(
function(){
stop();
},
function(){
timer = setTimeout(play,s_t_i);
}
);
}
function stop(){
clearTimeout(timer);
}
function play(){
clearTimeout(timer);
var to_location = -(current*li_width)+"px";
dom.children(".tabBody").children("ul").animate({
left:to_location
},500);
dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c).css("background-color",s_h_t_cc);
dom.children(".tabContainer").children(".tabHead").children("li").removeClass("currentBtn")
dom.children(".tabContainer").children(".tabHead").children("li").eq(current).children("a").css("color",s_h_c_t_c).css("background-color",s_h_c_t_cc);
dom.children(".tabContainer").children(".tabHead").children("li").eq(current).addClass("currentBtn");
if(current >= s_length-1){
current = 0;
}else{
current ++;
}
timer = setTimeout(play,s_t_i);
}
}
})(jQuery);</p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
8년 전
예제가 없어서 테스트는 못했습니다
구조상 3군데 수정하시면 되실듯 합니다
1. 처음 시간 시정
2. 마우스 아웃시
3. 스타트시
</p><p><span style="white-space:pre"> </span>(function(a){</p><p> a.fn.webwidget_scroller_tab=function(p){</p><p> var p=p||{};</p><p><span style="white-space:pre"> </span>//1. 여기수정 처음 시간</p><p> var s_t_i=p&&p.scroller_time_interval?p.scroller_time_interval:"100000";</p><p><span style="white-space:pre"> </span>//여기수정 나머지 시간 추가</p><p><span style="white-space:pre"> </span>var s_t_i2=p&&p.scroller_time_interval2?p.scroller_time_interval2:"5000";</p><p> var s_w_p=p&&p.scroller_window_padding?p.scroller_window_padding:"0";</p><p> var s_w_w=p&&p.scroller_window_width?p.scroller_window_width:"30";</p><p> var s_w_h=p&&p.scroller_window_height?p.scroller_window_height:"270";</p><p> var s_h_t_c=p&&p.scroller_head_text_color?p.scroller_head_text_color:"blue";</p><p> var s_h_t_cc=p&&p.scroller_head_text_bgcolor?p.scroller_head_text_bgcolor:"";</p><p> var s_h_c_t_c=p&&p.scroller_head_current_text_color?p.scroller_head_current_text_color:"black";</p><p> var s_h_c_t_cc=p&&p.scroller_head_current_text_bgcolor?p.scroller_head_current_text_bgcolor:"ab0007";</p><p> var d=p&&p.directory?p.directory:"images";</p><p> var dom=a(this);</p><p> var s_length=dom.children(".tabBody").children("ul").children("li").length;</p><p> var timer;</p><p> var current = 0;</p><p> var li_width;</p><p> s_w_p += "px";</p><p> s_w_w += "px";</p><p> s_w_h += "px";</p><p> </p><p> if(dom.find("ul").length==0||dom.find("li").length==0){</p><p> dom.append("Require content");</p><p> return null;</p><p> }</p><p> begin();</p><p> play();</p><p> function begin(){</p><p> dom.width(s_w_w);</p><p> dom.height(s_w_h);</p><p> li_width = parseInt(s_w_w);</p><p> dom.children(".tabBody").width(parseInt(s_w_w));</p><p> dom.children(".tabBody").height(parseInt(s_w_h)-28-4);</p><p> dom.children(".tabBody").children("ul").width((parseInt(s_w_w))*s_length);</p><p> dom.children(".tabBody").children("ul").height(parseInt(s_w_h)-28-4);</p><p> dom.children(".tabBody").children("ul").children("li").width(parseInt(s_w_w));</p><p> dom.children(".tabBody").children("ul").children("li").height(parseInt(s_w_h)-28-4);</p><p> dom.children(".tabBody").children("ul").children("li").children("p").css("padding",s_w_p);</p><p> dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c).css("background-color",s_h_t_cc);</p><p> dom.children(".tabContainer").children(".tabHead").children("li").children("a").click(function(){</p><p> current = dom.children(".tabContainer").children(".tabHead").children("li").index($(this).parent());</p><p> play();</p><p> stop()</p><p> });</p><p> dom.hover(</p><p> function(){</p><p> stop();</p><p> },</p><p> function(){</p><p><span style="white-space:pre"> </span>//timer = setTimeout(play,s_t_i); 대신에</p><p><span style="white-space:pre"> </span>//2. 여기수정</p><p><span style="white-space:pre"> </span>if(current==0){</p><p><span style="white-space:pre"> </span> timer = setTimeout(play,s_t_i);</p><p><span style="white-space:pre"> </span>}</p><p><span style="white-space:pre"> </span>else{</p><p><span style="white-space:pre"> </span>timer = setTimeout(play,s_t_i2);<span style="white-space:pre"> </span></p><p><span style="white-space:pre"> </span>}</p><p>
</p><p><span style="white-space:pre"> </span>}</p><p> );</p><p> }</p><p> function stop(){</p><p> clearTimeout(timer);</p><p> }</p><p> function play(){</p><p> clearTimeout(timer);</p><p> var to_location = -(current*li_width)+"px";</p><p> dom.children(".tabBody").children("ul").animate({</p><p> left:to_location</p><p> },500);</p><p> dom.children(".tabContainer").children(".tabHead").children("li").children("a").css("color",s_h_t_c).css("background-color",s_h_t_cc);</p><p> dom.children(".tabContainer").children(".tabHead").children("li").removeClass("currentBtn")</p><p> dom.children(".tabContainer").children(".tabHead").children("li").eq(current).children("a").css("color",s_h_c_t_c).css("background-color",s_h_c_t_cc);</p><p> dom.children(".tabContainer").children(".tabHead").children("li").eq(current).addClass("currentBtn");</p><p> if(current >= s_length-1){</p><p> current = 0;</p><p> }else{</p><p> current ++;</p><p> }</p><p><span style="white-space:pre"> </span>//3. 여기수정</p><p><span style="white-space:pre"> </span>//timer = setTimeout(play,s_t_i); 대신에</p><p><span style="white-space:pre"> </span>if(current==0){</p><p><span style="white-space:pre"> </span>timer = setTimeout(play,s_t_i);</p><p><span style="white-space:pre"> </span>}</p><p><span style="white-space:pre"> </span>else{</p><p><span style="white-space:pre"> </span>timer = setTimeout(play,s_t_i2);<span style="white-space:pre"> </span></p><p><span style="white-space:pre"> </span>}</p><p> </p><p> }</p><p> }</p><p>})(jQuery);</p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
히어1
8년 전
감사합니다.^^;
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인