Question

我有一张图片，当我悬停在它上面时，我能够查看左右箭头...当我点击箭头时，我正在使用jquery更改图像的源attr ... 所以我成功地点击箭头更改图像.. 我想要的是，我如何获得幻灯片放映的感觉...当前图片向右滑动的动画拍摄，当点击左箭头时，新图像从左侧滑入... 请帮帮我......我不想使用已有的插件...... 提前谢谢......

Answer 1

要做到这一点，我会有两个块，一个用于旧图像，一个用于新图像（两个都有溢出隐藏）。

起始位置：

  old - normal
  new - right margin = width of image

动画节目例如每0.05秒

  old - left margin+1
  new right margin-1

直到老人滑出去，新人已滑入。

Answer 2

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

Answer 3

这是完成的自定义动画工作，请找到fiddle

    $('.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');
});

jquery照片幻灯片

3 个答案: