Question

我创建了一个滑动图库，当按下按钮时，它会滑动图片并更新相关部分的图像属性。然而，这种效果完全像50％的时间。其他时候会出现第二个故障，然后图像会按预期进行。我已经为animate方法和数组更改方法附加了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函数内所做的任何事情都是您看到故障的原因。更改src代码的img会产生小故障。

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

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

我必须更改的是所有图片代码，即imageNoneLeft，imageLeft，image1，imageRight＆amp; imageNoneRight会改变彼此的类别，使其在动画后的位置保持不变。

此外，我必须在animateImages和leftSelect回调中添加另一条rightSelect行，为最远的图像设置动画，例如imageNoneLeft＆amp; imageNoneRight相对于按钮的点击动画彼此的位置。

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

<强> JavaScript的：

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

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

1 个答案: