슬라이더 기능이 응답하지 않습니다.

이것은 제가 만드는 캐 러셀 슬라이더입니다. 지금까지 한 가지가 올바르게 작동하지 않습니다. 특정 슬라이드로 건너 뛰려면 goTo() 함수를 사용하면 right() 함수가 작동하지 않습니다. left() 함수와 goTo()는 여전히 작동합니다. 내 테스트는 goTo()의 마지막 부분이 문제를 일으킨다는 것을 밝혀냈다. currslide 변수와 동일한 goTo() 매개 변수를 설정합니다. 나는 그것이 왜 문제가 될지 모르겠다. 당신이 온 클릭 이벤트를 통해,슬라이더 기능이 응답하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" language="javascript"></script> 
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" language="javascript"></script> 



<style type="text/css"> 

.arrow{margin:4px 0px 4px 4px; float:left; width:13px; height:13px;} 
#larrow { background:url(larrow.gif) no-repeat} 
#rarrow { background:url(rarrow.gif) no-repeat} 

#larrow:hover {background-position:0 -13px; cursor:pointer} 
#rarrow:hover {background-position:0 -13px; cursor:pointer} 

/* portfolio slider styles */ 
#portslider {position:relative; width:960px; background:url(../assets/slide_images/loading.gif) no-repeat 50% 50%; margin:0 auto} 


#portcontainer {position:relative; width:960px; height:370px; overflow:hidden; margin:0 auto} 

.portimg { 
    position: absolute; 
    top:0px; 
    left:0px; 
    width:960px; 
    height:370px; 
    display:none; 
} 

#captions {margin-top:10px; height: 22px; width:960px; background-color:#d5d5d5; position:relative} 
#captions ul li {list-style:none; float:left; margin:4px 0px 4px 4px; cursor:pointer } 
</style> 


<script type="text/javascript"> 

$(window).load(function() { 

$('#portslider').css({'background': 'none'});       
$('.portimg').last().fadeIn(1000); 

}); 

var currslide = 1; 

function right() { 

    var next = currslide+1; 

    if($('#portimg'+next).length) { 

    currslide ++; 
    var last = currslide - 1; 

    $('#portimg'+last).stop(true,true).animate({ 'left':'-=960px' }, {duration: 600, easing: 'easeOutCubic'}); 
    $('#portimg'+currslide).css({'left':'960px'}).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'-=960px' }, {duration: 600, easing: 'easeOutCubic'}); 

} 

}; 

function left() { 

    var next = currslide-1; 

    if($('#portimg'+next).length) { 

    currslide --; 
    var last = currslide + 1; 

    $('#portimg'+last).stop(true,true).animate({ 'left':'+=960px' }, {duration: 600, easing: 'easeOutCubic'}); 
    $('#portimg'+currslide).css({'left':'-960px'}).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'+=960px' }, {duration: 600, easing: 'easeOutCubic'}); 

} 

}; 

function goTo(n) { 
    var g=n - currslide; //g represents how many slides are between destination slide and current slide 
    var l=960*g; //l represents how many pixels slide n must slide 
    if (currslide != n) { 
    $('#portimg'+currslide).stop(true,true).animate({ 'left':-l+'px' }, {duration: 600, easing: 'easeOutCubic'}); 
    $('#portimg'+n).css({ 'left': l+'px' }).appendTo('#portcontainer').show().stop(true,true).animate({ 'left':'0' }, {duration: 600, easing: 'easeOutCubic'}); 

    currslide = n; 


    } 


}; 



</script> 


</head> 

<body> 
<div id="portslider"> 

<div id="portcontainer"> 
<img id="portimg2" class="portimg" src="test-port2.jpg" /> 
<img id="portimg3" class="portimg" src="test-port3.jpg" /> 
<img id="portimg4" class="portimg" src="test-port4.jpg" /> 
<img id="portimg5" class="portimg" src="test-port5.jpg" /> 
<img id="portimg1" class="portimg" src="test-port1.jpg" /> 
</div> 


<div id="captions"> 
<div id="larrow" class="arrow" onclick="left()" /></div> 
<div id="rarrow" class="arrow" onclick="right()" /></div> 
<ul> 
<li onclick="goTo('1')">1</li> 
<li onclick="goTo('2')">2</li> 
<li onclick="goTo('3')">3</li> 
<li onclick="goTo('4')">4</li> 
<li onclick="goTo('5')">5</li> 

</ul> 
</div> 

</div> 

</body> 
</html>

출처

2011-04-18 808inbinary

당신은 문자열로 고토 인수를 전달하는을 돕는

감사합니다. goto ('1')가 호출되면 currslide = '1'로 설정합니다. +가 연결 및 추가이기 때문에 right()를 호출하면 currslide가 '3'이면 currslide = currslide + 1이 4가 아닌 '31'이됩니다. 따라서 left()는 여전히 작동하지만 빼기 부호는 그렇지 않습니다. 오버로드 된 자바 스크립트는 그것을 int로 다시 캐스팅합니다.

변경

<li onclick="goTo('1')">1</li> 
<li onclick="goTo('2')">2</li> 
...

친절한 PS로

<li onclick="goTo(1)">1</li> <!-- no ' around the 1 --> 
<li onclick="goTo(2)">2</li> 
...

에, 나는 아마 적어도 오른쪽() 대신 사본 고토에 대한 래퍼로) (왼쪽을 사용하여, 일부 부드러운 리팩토링을 제안 할 수있다 그 논리를 붙이기. 질문이나 건배가 있으면 알려주세요.

출처

2011-04-18 23:34:45 goggin13

답변 해 주셔서 감사합니다. 내가 right(), left() 및 goTo()를 결합하는 방법을 아직 모르겠다. 모든 것이 작동 할 때까지 내가 가진 것을 고수하고 싶다고 생각합니다. 당신은 내가 inbetween 슬라이드를 얻는 방법을 안다. (여러개의 슬라이드를 건너 뛰는 경우) 적절한 위치에서 과거로 슬라이드 할 수 있을까? 나는 먼 길 (if (g == 2) ... else if (g == 3) ... else if (g == 4) ...)을 할 수있다. 그러나 그것을 단축하려고하는 Im. – 808inbinary

슬라이더 기능이 응답하지 않습니다.

답변

관련 문제