jquery - jquery照片幻灯片

Question

我有一个图像，当我将鼠标悬停在它上面时，我可以查看左右箭头...当我单击箭头时，我正在使用 jquery 更改图像的源属性...所以我成功地更改了图像单击箭头..我想要的是，我如何获得幻灯片放映的感觉...当单击左箭头时，当前图像向右滑动和新图像从左侧滑入的动画拍...请帮助我这个...我不想使用已经存在的插件...提前谢谢...

Answer 1

为此，我将有两个块，一个用于旧图像，一个用于新图像（都具有溢出隐藏）。

起始职位：

  老 - 正常
  新 - 右边距 = 图像宽度

在动画刻度上，例如每 0.05 秒

  旧 - 左边距+1
  新的右边距-1

直到旧的滑出，新的滑进来。

Answer 2

我建议您使用 JQuery 的动画功能。查看http://api.jquery.com/animate/了解更多信息。

Answer 3

这是完成的自定义动画工作请找到小提琴

    $('.arrowRight').on('click', function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var prevLandscape = currLandscape.prevAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var prevDesc= currDesc.prevAll(".hiddenDesc").first();

    if (prevLandscape.length == 0) {
        prevLandscape = currLandscape.siblings('.hiddenImg').last();
    }
    if (prevDesc.length == 0) {
        prevDesc= currDesc.siblings('.hiddenDesc').last();
    }

    prevLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    prevLandscape.removeClass('hiddenImg').addClass('currImg');
});


$('.arrowLeft').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "left" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});