滑块功能没有响应

发布于 2024-11-02 10:39:46 字数 4172 浏览 1 评论 0原文

这是我正在构建的一个轮播滑块。到目前为止，有一件事不太正常。如果我使用 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>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

再可℃爱ぅ一点好了 2024-11-09 10:39:46

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

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

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

回复收藏 0 原文

~没有更多了~