创建一个不会因图像变化而出现故障的滑动图像库

Question

我创建了一个滑动图片库，当按下按钮时，它会滑动图片并更新相关部分的图片属性。然而，这在 50% 的情况下是完美的。其他时候会出现第二个故障，然后图像会按预期到位。我已经为动画方法和数组更改方法附加了 javascript 方法。我已经看过其他地方，但看不到其他人有类似的问题或我哪里出错了，尤其是当它不经常发生时。

imageGallery.leftSelect.onclick = function () {
    window.setTimeout(imageGallery.rightClick, 250);
    imageGallery.animateImages('.image1', '.imageRight');
    imageGallery.animateImages('.imageRight', '.imageNoneRight');
    imageGallery.animateImages('.imageLeft', '.image1');
    imageGallery.animateImages('.imageNoneLeft', '.imageLeft');
};

animateImages: function (classFrom, classTo) {
    var classMoving = $(classFrom);
    var classGoingTo = $(classTo);

    classMoving.animate({
        top: classGoingTo.css('top'),
        left: classGoingTo.css('left'),
        width: classGoingTo.css('width'),
        opacity: classGoingTo.css('opacity'),
    }, 258, function () {
        console.log('Animated');
        classMoving.css({"width":'', "opacity":'', "top":'', "left":'', });
    });
},

rightClick: function () {
    imageGallery.imagesDisplay.push(imageGallery.imagesDisplay.shift());

    imageGallery.imageNoneLeft.setAttribute('src', imageGallery.imagesDisplay[2]);
    imageGallery.imageLeft.setAttribute('src', imageGallery.imagesDisplay[1]);
    imageGallery.imageMain.setAttribute('src', imageGallery.imagesDisplay[0]);
    imageGallery.imageRight.setAttribute('src', imageGallery.imagesDisplay[10]);
    imageGallery.imageNoneRight.setAttribute('src', imageGallery.imagesDisplay[9]);

},

有人可以帮忙吗，我真的需要这个才能工作吗？

如果有任何不清楚的地方或您需要更多代码，请告诉我。

谢谢，

Answer 1

首先，罪魁祸首是所有图像的 setAttribute，即无论您在 rightClick 和 leftClick 函数中做什么，都是您看到故障。更改 img 标签的 src 会产生故障 .

但是我们不能简单地删除它，因为您的方法在很大程度上依赖于这种图像交换。

我不得不先崩溃，真正理解你的方法。它的工作方式是，您可以设置动画，例如，image1（居中的）在单击 rightCarousel 按钮时移动到 imageLeft 的位置。在同一次点击中，您有一个 setTimeout 几乎是动画持续时间来调用 rightClick 函数。这个 rightClick 函数然后交换图像，以便 image1 可以始终保持在中心并且只有图像可以在动画之后来回移动。这就是问题所在。

我必须更改的是所有图像标签，即 imageNoneLeft、imageLeft、image1、imageRight 和 imageNoneRight 会相互更改类这样他们的位置在动画之后保持不变。

此外，我不得不在你的 leftSelect 和 rightSelect 回调中添加另一个 animateImages 行来为最远的图像设置动画，即 imageNoneLeft & imageNoneRight 到相对于按钮的点击动画到彼此的位置。

看看this jsFiddle。它将帮助您更好地理解。如果您有任何问题，请告诉我。

JavaScript:

var imageGallery={
    prefix:'https://dl.dropboxusercontent.com/u/45891870/Experiments/Whosebug/1.5/',
    imagesDisplay:['JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg','GSAP.jpg','JS.jpg','PIXI.jpg'],
    rightSelect:document.querySelector('.rightCarousel'),
    leftSelect:document.querySelector('.leftCarousel'),
    imageMain:document.querySelector('.image1'),
    imageLeft:document.querySelector('.imageLeft'),
    imageRight:document.querySelector('.imageRight'),
    imageNoneLeft:document.querySelector('.imageNoneLeft'),
    imageNoneRight:document.querySelector('.imageNoneRight'),
    init:function(){
        imageGallery.imagesDisplay.push(imageGallery.imagesDisplay.shift());
        imageGallery.imageNoneLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[2]);
        imageGallery.imageLeft.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[1]);
        imageGallery.imageMain.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[0]);
        imageGallery.imageRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[10]);
        imageGallery.imageNoneRight.setAttribute('src',imageGallery.prefix+imageGallery.imagesDisplay[9]);
    },
    animateImages:function(classFrom,classTo){
        var classMoving=$(classFrom);
        var classGoingTo=$(classTo);
        classMoving.animate({
            top:classGoingTo.css('top'),
            left:classGoingTo.css('left'),
            width:classGoingTo.css('width'),
            opacity:classGoingTo.css('opacity')
        },258,function(){
            $(this).removeClass(classFrom.substr(1));
            $(this).addClass(classTo.substr(1));
            $(this).removeAttr('style');
        });
    }
};
imageGallery.init();
imageGallery.leftSelect.onclick=function(){
    imageGallery.animateImages('.imageNoneRight','.imageNoneLeft');
    imageGallery.animateImages('.imageRight','.imageNoneRight');
    imageGallery.animateImages('.image1','.imageRight');
    imageGallery.animateImages('.imageLeft','.image1');
    imageGallery.animateImages('.imageNoneLeft','.imageLeft');
};
imageGallery.rightSelect.onclick=function(){
    imageGallery.animateImages('.imageNoneLeft','.imageNoneRight');
    imageGallery.animateImages('.imageLeft','.imageNoneLeft');
    imageGallery.animateImages('.image1','.imageLeft');
    imageGallery.animateImages('.imageRight','.image1');
    imageGallery.animateImages('.imageNoneRight','.imageRight');
};

创建一个不会因图像变化而出现故障的滑动图像库

Creating a sliding image gallery that does not glitch on image change

javascript

jquery

css

html

jquery-animate