это карусельный слайдер, который я строю. Пока что одна вещь не работает правильно. Если я использую функцию 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>