0

我正在尝试将上一个和下一个按钮添加到我的内容滑块但似乎有问题，我真正想做的是每次单击上一个或下一个按钮时将 $slideCtn 向左或向右移动宽度 slideWidth但我不确定如何通过 slideWidth 的值增加每次点击。我试过 ++ 和 -- 等但没有结果，谁能告诉我做这样的事情的最佳方法？也非常欢迎任何其他建议！

或者我应该创建一个设置为 0 的全局索引变量，然后在单击分页 x 或单击上一个/下一个箭头时更新此全局变量？

JS 片段

//Add previous + next arrows
$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    $slideCtn.css('left', ( arrDir === 'prev' ) ? -(slideWidth) : +(slideWidth));

    e.preventDefault();
});

JS 小提琴 http://jsfiddle.net/SG5ad/10/

4

2 回答 2

1

目前，你告诉它移动到一个绝对位置——-200px 或 +200px（从不 0px、400px、600px 等）。

您需要考虑其当前位置以及您想要调整多少：http: //jsfiddle.net/SG5ad/12/

var arrDir = $(this).data('dir')
    iLeft = parseInt( $slideCtn.css('left') );

$slideCtn.css('left', ( arrDir === 'prev' ) ? iLeft - slideWidth : iLeft + slideWidth);

您还需要修复的一个错误是，在您已经使用“x”导航跳转到特定幻灯片之前，Next/Prev 按钮什么也不做。

作为一个完全独立的问题，大约 6 个月前，我写了这样的东西作为工作项目的一部分（它有更多的花里胡哨，但没有太大的不同），我想说有一件重要的事情值得改变.

为了从一张幻灯片转到a另一张幻灯片，您为幻灯片、、和d设置动画，这意味着 a) 4 张幻灯片正在动画，而不是 1 张（加上它们的所有子元素） b) 您必须通过幻灯片，即使它们'不相关abcd

bc

我会看看使用 z-index 将所有幻灯片的基本位置更改为彼此堆叠在一起，然后简单地将顶部幻灯片设置为动画到一侧以显示其下方的幻灯片。它需要一些代码来跟踪哪些幻灯片在哪里（$.data()可能有助于那里），但在它的末尾为您提供了一个性能更高的滑块。

于 2012-10-11T22:21:22.723 回答
0

你必须用 .animate()

$dirArrows.on('click', function(e){

    var arrDir = $(this).data('dir');

    if (arrdir == left){
       $slideCtn.animate({
         left: "+=250"
       });
    }
});
于 2012-10-11T22:19:39.307 回答