滑块功能无响应

问题描述

| 这是我正在制作的旋转木马滑块。到目前为止，一件事是行不通的。如果我使用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,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\' },easing: \'eaSEOutCubic\'});
  $(\'#portimg\'+currslide).css({\'left\':\'-960px\'}).appendTo(\'#portcontainer\').show().stop(true,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\' },easing: \'eaSEOutCubic\'});
    $(\'#portimg\'+n).css({ \'left\': l+\'px\' }).appendTo(\'#portcontainer\').show().stop(true,true).animate({ \'left\':\'0\' },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>

解决方法

您将通过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的包装器，而不是复制粘贴该逻辑。如果您有任何疑问，请告诉我，加油！

功能功能响应响应响应滑块滑块

滑块功能无响应

问题描述

解决方法

相关问答