Question

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

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

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 Fiddle http://jsfiddle.net/SG5ad/10/

Answer 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”导航跳转到特定幻灯片之前，“下一个/上一个”按钮不执行任何操作。

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

为了暂时从幻灯片a转到幻灯片d，您可以为幻灯片a，b，c和{{1}设置动画}，这意味着 a）4张幻灯片是动画而不是1（加上所有子元素） b）即使它们不相关，您也必须通过幻灯片d和b

我要看一下使用z-index将所有幻灯片的基本位置更改为彼此叠加，然后简单地将顶部幻灯片设置为一侧以显示其下方的幻灯片。它需要一些代码来跟踪哪些幻灯片在哪里（c可能会有帮助）但在最后给你一个更高性能的滑块。

Answer 2

你必须使用.animate（）

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

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

    if (arrdir == left){
       $slideCtn.animate({
         left: "+=250"
       });
    }
});

有关如何修复内容滑块的上一页和下一页按钮的建议

2 个答案: