Javascript 更改不透明度会中断图像的定位

我正在尝试为一个画廊做一个随机的图像幻灯片。我在页面上有两个图像，“前”一个和“后”一个，我设置了一个计时器，每隔几秒钟，将后图像移到前面并加载一个新的后图像。我基本上是通过交换代码中的图像对象来实现的

当后面的图像变成前面的图像时，我让它从不透明度0逐渐淡入到不透明度1，而前面的图像则相反。我的实施如下：

var fadeOutCt = 0;
var fadeOutInterval;

// Decrements the opacity of element by amt, until cap
function decrementOpacity( element, amt, cap ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    currentOpacity = currentOpacity - amt;
    element.setAttribute( "style", "opacity:" + currentOpacity );

    fadeOutCt = fadeOutCt + 1;

    if ( fadeOutCt >= cap ) {
        element.setAttribute( "style", "opacity:0" );
        clearInterval( fadeOutInterval );
    }
}

// Calls decrementOpacity to fill the specified interval.
function fadeOut( element, interval ) {
    var currentOpacity = Number( window.getComputedStyle( element ).getPropertyValue( "opacity" ) ); 
    fadeOutCt = 0;
    if ( currentOpacity > 0 ) {
        cap = interval / 10.0;
        amt = 1.0 / cap;
        fadeOutInterval = setInterval( decrementOpacity, 10, element, amt, cap );
    }
}

另外，我还有另一个例程，它调整我加载的图像的大小，以符合用户的屏幕（它还将图像居中）。我在淡入或淡出操作之前立即运行此命令

function resizeForSlideshow( imgToResize ) {
    // Get size of usable area for slideshow
    var usableWidth = window.innerWidth;
    var titleTable = document.getElementById( "descTable" );
    var windowHeight = window.innerHeight;
    var tableHeight = titleTable.offsetHeight;
    var usableHeight = windowHeight - tableHeight;

    // Resize containing div
    var slideDiv = document.getElementById( "slideDiv" );
    slideDiv.setAttribute( "style", "height:" + usableHeight + "px" );

    // Get size of native image to be displayed
    var nativeWidth = imgToResize.naturalWidth;
    var nativeHeight = imgToResize.naturalHeight;

    // Determine width-to-height ratios of those two
    var windowRatio = usableWidth / usableHeight;
    var imageRatio = nativeWidth / nativeHeight;

    if ( imageRatio > windowRatio ) {
        // image's width-to-height is greater than window
        // image should be set to 100% width, less height
        imgToResize.width = usableWidth;
        imgToResize.height = usableWidth * ( nativeHeight / nativeWidth );

        // relocate image accordingly
        var newTop = ( usableHeight - imgToResize.height ) / 2;
        imgToResize.style.left = 0;
        imgToResize.style.top = newTop + "px";
    }
    else {
        // image's width-to-height is less than window
        // image should be set to 100% height, less width
        imgToResize.height = usableHeight;
        imgToResize.width = usableHeight * ( nativeWidth / nativeHeight );

        // relocate image accordingly
        var newLeft = ( usableWidth - imgToResize.width ) / 2;
        imgToResize.style.top = 0;
        imgToResize.style.left = newLeft + "px";

    }
}

问题是，当我淡入或淡出时，会破坏图像的定位。它们不再居中，而是恢复到页面的左上角（尽管它们的大小保持不变）。我试过一些方法，但我没有主意，我希望有人能告诉我这里出了什么问题以及我如何解决它

（如果看到该准则起作用将有助于：

编辑：我后来解决了这个问题。

---

问题是，使用

setAttribute

设置不透明度也删除了我给定的位置设置。手动设置

element.style.opacity

可以使事情正常进行。

您应该使用

 element.setAttribute( "style", "opacity:" + currentOpacity +";");

---

用css把它居中怎么样

.slide {
  display: block;
  margin: auto;
  position: relative;
}

---

我后来发现了这个问题。问题是，使用setAttribute设置不透明度也删除了我给定的位置设置。手动设置element.style.opacity可以解决问题。

这解决了问题，但现在由于相对位置的原因，我无法将图像层叠在一起。有什么好办法吗？