Question

这是我正在建造的旋转木马滑块。到目前为止，有一件事是行不通的。如果我使用goTo（）函数向前跳到某个幻灯片，则right（）函数停止工作。 left（）函数和goTo（）仍然有效。我的测试显示goTo（）的最后一部分导致了问题。我将goTo（）参数设置为等于currslide变量。我不知道为什么那会是一个问题。

感谢您的帮助

    <!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>

Answer 1

您通过onclick事件将参数传递给goTo作为字符串。当调用goto（'1'）时，设置currslide ='1'。由于+是串联和加法，当你调用right（）时，如果currslide是'3'，那么currslide = currslide + 1变为'31'而不是4.所以left（）仍然有效，因为减号不是重载的javascript会将它转换回int。

更改

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

到

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

作为一个友好的ps，我可能会建议一些温和的重构，也许至少使用right（）和left（）作为goTo的包装，而不是复制粘贴那个逻辑。如果您有任何疑问，请告诉我，欢呼！

滑块功能无响应

1 个答案: