Javascript 创建在图像更改时不会出现故障的滑动图像库

我已经创建了一个滑动图像库，当按下按钮时，它会滑动图片并更新相关部分的图像属性。 然而，这种方法在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');
};

有人能帮忙吗，我真的需要这个来工作

如果有什么不清楚或你需要更多的代码让我知道

---

谢谢，

首先，罪魁祸首是所有图像的setAttribute，也就是说，无论您在右键单击和左键单击功能中做了什么，都是您看到故障的原因。更改img标记的src会产生故障

但是，我们不能简单地删除它，因为您的方法严重依赖于这种图像交换

我必须先崩溃，真正理解你的方法。它的工作方式是，您可以设置动画，例如，单击右侧旋转木马按钮，将居中的图像1移动到图像左侧的位置。在同一次单击中，设置的超时时间几乎等于调用rightClick函数的动画持续时间。然后，此右键单击功能交换图像，以便image1始终保持在中心，并且只有图像可以在动画之后进出。这就是问题所在

我必须更改的是，所有图像标记，即imageNoneLeft、imageLeft、image1、imageRight和imageNoneRight，都会更改其他类，以便它们的位置在动画之后保持更改

此外，我还必须在leftSelect和rightSelect回调中添加另一个animateImages行，以设置最远图像的动画，即imageNoneLeft和imageNoneRight，以便根据按钮的单击设置彼此位置的动画

看一看。这将帮助你更好地理解。如果你有任何问题，请告诉我

JavaScript:

---

评论不用于扩展讨论；此对话已结束。评论不用于扩展讨论；这段对话已经结束。

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]);

},

var imageGallery={
    prefix:'https://dl.dropboxusercontent.com/u/45891870/Experiments/StackOverflow/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');
};