slider function not responding
this is a carousel slider I am building. So far one thing is not working right. If I use the goTo() function to skip ahead to a certain slide, the right() function stops working. The left() function and goTo() still works. My testing has revealed that the last part of goTo() is causing the problem. I set the goTo() parameter equal to the currslide variable. I dont know why that would be a problem though.
thanks for your helping
<!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开发者_如何学Go 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>
You are passing arguments to goTo as strings, via the onclick events. When goto('1') gets called, you set currslide = '1'. Since + is both concatenation and addition, when you call right(), if currslide is '3', then currslide = currslide + 1 becomes '31', instead of 4. So left() still works, as the minus sign is not overloaded javascript casts it back to an int for you.
Change
<li onclick="goTo('1')">1</li>
<li onclick="goTo('2')">2</li>
...
to
<li onclick="goTo(1)">1</li> <!-- no ' around the 1 -->
<li onclick="goTo(2)">2</li>
...
As a friendly ps, I might suggest some gentle refactoring, maybe at least using right() and left() as wrappers for goTo instead of copy pasting that logic. Let me know if you have any questions, cheers!
加载中,请稍侯......
精彩评论