Question

嗨，大家需要你的帮助，

预期结果：每次点击缩略图时，所有图片都应该从右到左重复幻灯片动画。

当前结果：截至目前，第一张图片是唯一执行幻灯片动画的图片。

这是我的jQuery：https://jsfiddle.net/30ypzk9y/3/

jQuery(document).on('click','.thumbnail-stay a', function(){

        var photo_fullsize =  jQuery(this).find('img').attr('src').replace('150/200','500/500');

        jQuery('.gallery-main-img img').attr('src', photo_fullsize).attr('style', '-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;').addClass('gallery-main-img-move')
        // .delay(1000)
        // .queue(function() {
        //  $(this).removeClass("gallery-main-img-move");
        //  $(this).dequeue();
        // });
        // .attr('style', 'right:0;');

        return false;

    });

Answer 1

据我所知，您希望每张图片在点击时从右向左滑入。您正在通过以下方式实现此目标：

每次单击图像时，您都会更新主图像（幻灯片图像），以便src attr反映所单击图像的图像。
然后添加幻灯片动画。

我看到的问题是，在动画制作之前，您没有将图像移回原始起点，所以一旦单击第二张图像，图像就已经处于结束位置。您需要在每次单击时移回图像，以便可以为其设置动画。

每个单击的缩略图应向左滑动，而不仅仅是第一个图像

1 个答案: