0

我有一个图片库，我在单击下一个/上一个时替换源，并且我希望图像在这样做时滑动。就像是：

 function next(){
    imageNr++;
    image.animate({left: -1000}, 'slow',function() {
        image.attr('src', imageURL + imageNr + imgExt);
    });
    image.animate({right: 1000}, 'slow');
}

因此，当单击下一个时，当前图像应向左移动，并从右侧移动下一个图像，而单击上一个时则相反。怎么能做到这一点？先感谢您。

jsfiddle：http: //jsfiddle.net/sDZ9j/

4

2 回答 2

1

设法让它与：

    image.animate({'left' : '-1000'},'fast', function(){image.css({'left': '1000px'});});       
    image.attr('src',imageURL + imageNr + imgExt);      
    image.animate({'left' : '0'},'fast');
于 2013-06-20T00:32:32.500 回答
0

感谢 junkystu，这是我使用的代码。请注意有助于过渡的 settimeout（因此您看不到离开图库的新图像）。数字 95 基于 100 的动画速度，仅通过眼睛调整。如果用户单击上一个图像，我还添加了一个反向动画。

我也有用户可以点击的不执行任何动画的缩略图。因此，if next else if prev当direction == "none"

旧代码 - 不要使用它。

if (direction == "next")
    image.animate({ 'left': '-1000' }, 100, function () { image.css({ 'left': '1000px' }); });
else if (direction == "prev")
    image.animate({ 'left': '1000' }, 100, function () { image.css({ 'left': '-1000px' }); });

setTimeout(function() {
    image.attr('src', largerImage);
}, 95);

if (direction == "next")
    image.animate({ 'left': '0' }, 100);
else if (direction == "prev")
    image.animate({ 'left': '0' }, 100);

另一个提示是将img标签放在divwhereoverflow: hidden;

新代码！

这是我的 document.ready 控制事件连接

$(document).on("click", ".gallery-thumbnail", function (e)
    {
        var gallery = $(this).closest('.gallery');
        GallerySetFeature(gallery, $(this).attr("data-gallery-id"), "none");
    });

    $(document).on("click", ".gallery-prev", function (e) { GalleryNextPrev(this, e); });
    $(document).on("click", ".gallery-next", function (e) { GalleryNextPrev(this, e); });
    //-- only showing the next/prev controls on hover.
    $(document).on("mouseenter", ".gallery-feature", function (e)
    {
        $(this).find('.gallery-next').removeClass('invisible');
        $(this).find('.gallery-prev').removeClass('invisible');
    });
    $(document).on("mouseleave", ".id-gallery-feature", function (e)
    {
        $(this).find('.gallery-next').addClass('invisible');
        $(this).find('.gallery-prev').addClass('invisible');
    });

这是单击下一个/上一个控件时的功能。当在第一张图像之前或最后一张图像之后超出方向时，这将处理反向动画。

function GalleryNextPrev(control, e)
{
    var gallery = $(control).closest('.gallery');
    var ubound = parseInt(gallery.attr('data-gallery-ubound'));
    var current = parseInt(gallery.attr('data-gallery-currentid'));
    var directionIsNext = $(control).hasClass('gallery-next');

    var newIndex = (directionIsNext ? current + 1 : current - 1);
    if (newIndex > ubound)
    {
        newIndex = 0;
        directionIsNext = false;
    } 
    else if (newIndex < 0)
    {
        newIndex = ubound;
        directionIsNext = true;
    }

    GallerySetFeature(gallery, newIndex, (directionIsNext ? "next" : "prev"));
}

这是我的动画功能。注意 imagesLoaded 函数（获取http://desandro.github.io/imagesloaded/）！哦，另外，如果图像在特定时间内没有加载，我会在图像顶部添加一个 ajax 微调器。

var ajaxSpinnerId;
function GallerySetFeature(gallery, thumbIndex, direction)
{
    thumbIndex = parseInt(thumbIndex);
    gallery.attr('data-gallery-currentid', thumbIndex);
    var thumbnail = gallery.find('[data-gallery-id=' + thumbIndex + ']');
    var thumbnailImg = thumbnail.find('img');

    var largerImage = thumbnail.attr('data-gallery-larger');
    var downloadLink = thumbnail.attr('data-gallery-download');
    var thumbTitle = thumbnail.attr('data-gallery-title');

    var feature = $(gallery).find('.gallery-feature');
    var feature_img = $(gallery).find('.gallery-feature img');

    if (direction == "next")
        feature_img.animate({ 'left': '-1000' }, 100, function() { feature_img.css({ 'left': '1000px' }); });
    else if (direction == "prev")
        feature_img.animate({ 'left': '1000' }, 100, function() { feature_img.css({ 'left': '-1000px' }); });


    feature_img.attr('src', largerImage);
    feature_img.attr('width', feature_img.width);
    feature_img.attr('height', feature_img.height);

    //-- IsUndefined is my function, but you know what it is anyway. Just checking Is Undefined!
    if (IsUndefined(ajaxSpinnerId))
    {
        ajaxSpinnerId = setTimeout(function() {
            //-- ajax spinner start
            feature.addClass("gallery-ajax");
        }, 150);
    }

    imagesLoaded(feature_img, function() {
        //-- ajax spinner end
        clearTimeout(ajaxSpinnerId);
        ajaxSpinnerId = undefined;
        feature.removeClass("gallery-ajax");

        if (direction == "next")
            feature_img.animate({ 'left': '0' }, 100);
        else if (direction == "prev")
            feature_img.animate({ 'left': '0' }, 100);
    });

    //-- Just setting labels like title, image size and download link all storted client side as attributes.
    $(gallery).find('.gallery-download').attr('href', downloadLink);
    $(gallery).find('.gallery-title').text(thumbTitle);
    $(gallery).find('.gallery-position').text(thumbIndex + 1);

    //-- because I have little thumbnails the user can directly click on. I put a color border around the thumbnail to indicate the current showing. This works for prev/next image link too.
    gallery.find('.gallery-thumbnail-img-selected').removeClass('gallery-thumbnail-img-selected').addClass('gallery-thumbnail-img');
    thumbnailImg.addClass('gallery-thumbnail-img-selected').removeClass('gallery-thumbnail-img');
}
于 2013-06-28T02:57:51.470 回答