Question

我有一个充满图像的页面，当您点击任何人时，该图像在页面中心显示完整大小，带有前/后箭头。我希望通过转换我已成功完成的不透明度来点击大图像时淡化。

现在我的问题是，当你进行不透明度转换之前，你单击向前或向后箭头来滚动JavaScript呈现下一个图像的图像（我不能使用jQuery）。我已经看过这里并搜索了不同的短语，但似乎无法得到一个有效的答案。大多数文章仅涉及初始不透明度转换，如果您想一个接一个地显示多个图像，请不要考虑这些内容。

HTML

<img id="popup" class="Absolute_Center is_Image" alt="Girl Popup" data-picture="">

JS

初始化

var oimgPopup = document.getElementById("popup");

function fadeOut(el) {
    var elem = document.getElementById(el);
    elem.style.transition = "opacity 2s linear 0s";
    elem.style.opacity = 0;
}

function fadeIn(el) {
    var elem = document.getElementById(el);
    console.log(elem);
    elem.style.transition = "opacity 2s linear 0s";
    elem.style.opacity = 1;
}
/* =============================================================================
   ============ add event listener for Large Popup of       ====================
   ============ image when small image on page is clicked   ====================
   ============================================================================= 
 */
oel.addEventListener("click", function(e) {
    var imgClicked = e.target.src;
    var imgNumber = e.target.dataset.picture; // Find the number of the picture that was clicked by looking in the data- variable
    oimgPopup.setAttribute("src", imgClicked);
    oimgPopup.setAttribute("data-picture", imgNumber); // Set Picture number via the data-picture attribute for #popup
    oimgPopup.style.transition = "opacity 2s" // Set Opacity transition effect
    fadeIn("popup"); // Now Picture will fadein
    var oallImages = document.images;
    for (var i = 0; i < oallImages.length; i++) {
        if (oallImages[i].classList.contains("arrow")) {
            oallImages[i].classList.toggle("arrow");
            oallImages[i].style.zIndex = "9";
        }
    }
}); // End Popup Event

前进/后退箭头单击

ofwdArrow.addEventListener("click",
    function(e) {
        fadeOut("popup"); // Want current image to transition out. But JS changes it too fast.
        var currentPopup = oimgPopup.dataset.picture;
        var pageImages = document.querySelectorAll("div#masonry img");

        currentPopup = +currentPopup + 1; /* +y unary operation coerces y to a number.Concatenation changes y back to string type. */

        if (currentPopup <= pageImages.length) {

            var o_nextImage = document.querySelector('[data-picture ="' + currentPopup + '"]');
            var nextSrc = o_nextImage.getAttribute("src");
            oimgPopup.setAttribute("src", nextSrc);
            oimgPopup.setAttribute("data-picture", currentPopup);
            fadeIn("popup"); // Not even seen bacause script has already changed image.

        }
    });

任何关于如何在箭头点击上淡出/淡出图片的帮助都将非常感激。

Answer 1

由于您没有使用jQuery，您可能需要做的就是这样。你在哪里调用fadeOut（＆＃34; popup＆＃34;）：

fadeOut("popup");
//set a timeout to wait 2 seconds before incrementing the currentPopup 
setTimeout(function(){
 currentPopup = +currentPopup + 1;
}, 2000);

...使用transitionend事件是一种更好的方法，但是他会帮助你快速启动并运行。

希望这有帮助吗？

JavaScript在不透明度转换完成之前更改图像

HTML

JS

初始化

前进/后退箭头单击

1 个答案: