jQuery+css3在滑块上转换

Question

我的动画效果很好，但我需要帮助来计算translateX的正确像素。

当前仅计算第一次点击.next .prev

$('.prev').click(function(e) {
    e.preventDefault();
    var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * 160 + "px)").index() - 1;
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout').css("transform", "translateX(" + $(this).index() * -0 + "px)");
    updateNav();
});
$('.next').click(function(e) {
    e.preventDefault();
    var idx = $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn').css("transform", "translateX(" + $(this).index() * -160 + "px)").index() + 1;
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout').css("transform", "translateX(" + $(this).index() * -160 + "px)");
    updateNav();
});

http://jsfiddle.net/JQq5n/462/（firefox）

Answer 1

首先，

您的索引是错误的$（this）指的是$（'.prev'）/$（'.next'）

var idx=$（'.wrappe.fadeIn'）.addClass（'fadeout'）.removeClass（'faleIn'）.css（"transform"，"translateX（"+$（this）.index（）*160+"px）"）.index（）-1；

一旦我解决了这个问题，我查看了你的.容器溢出：滚动

第四个包裹被包裹到下一排。

增加ul的宽度解决了这个问题。

ul｛宽度：1300px；｝

我还发现单位偏移量为320px（.container的宽度）

最后，我们现在在一行中有了.包装，还有正确的索引值和正确的偏移

将上述值（如）组合在一起

$('.prev').click(function (e) {
    e.preventDefault();
    var idx = $('.wrap.fadeIn').index() - 1;
    $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn')
        .css("transform","translateX(" + 320 * idx + "px)").index() - 1;
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout')
        .css("transform", "translateX(" + -320 * idx + "px)");
    updateNav();
});
$('.next').click(function (e) {
    e.preventDefault();
    var idx = $('.wrap.fadeIn').index() + 1;
    $('.wrap.fadeIn').addClass('fadeout').removeClass('fadeIn')
        .css("transform", "translateX(" + -320 * idx + "px)").index() + 1;
    $('.wrap').eq(idx).addClass('fadeIn').removeClass('fadeout')
        .css("transform", "translateX(" + -320 * idx + "px)");
    updateNav();
});

我能够实现功能功能状态

我不喜欢后面.包装的延迟造成的空白，所以我根据索引调整了转换，得到了这个。