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

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

本文关键字：图像 故障 创建      更新时间：2023-09-26

我创建了一个滑动图片库，当按下按钮时，它会滑动图片并更新相关部分的图像属性。但是，这在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]);
},

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

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

谢谢

首先，罪魁祸首是所有图像的setAttribute，即您在rightClick和leftClick函数中所做的任何事情都是您看到故障的原因。更改img标签的src会产生故障。

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

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

我必须改变的是所有图像标签，即 imageNoneLeft、imageLeft、image1、imageRight imageNoneRight会改变彼此的类，使得它们的位置在动画之后保持不变。

此外，我必须在您的leftSelect中添加另一行animateImages并rightSelect回调来动画最远的图像，即 imageNoneLeft & imageNoneRight 根据按钮的单击来制作彼此位置的动画。

看看这个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');
};
相关文章：