滑块功能无响应
|
这是我正在制作的旋转木马滑块。到目前为止，一件事是行不通的。如果我使用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>
没有找到相关结果
已邀请:
1 个回复
辽躺
至作为一个友好的ps，我可能建议进行一些温和的重构，也许至少使用right（）和left（）作为goTo的包装器，而不是复制粘贴该逻辑。如果您有任何疑问，请告诉我，加油！