JS图像转换不起作用

JS Image Transition Not Working

本文关键字：不起作用 转换 图像 JS      更新时间：2023-09-26

我无法使用JavaScript添加CSS不透明度转换。请告诉我代码出了什么问题。http://jsfiddle.net/copperspeed/bvWbB

(function () {
        var myImgs = document.getElementById('vz0');
        var i = 0;
        function cycle() {
            if (i <= 3) {
                var myArray = [
                    'http://jsrun.it/assets/t/r/U/O/trUOT.jpg',
                    'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg',
                    'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg',
                    'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg'
                ];
                console.log(myArray[0]);
                myImgs.setAttribute("src", myArray[i]);
                if (myImgs.style.opacity === '0') {
                    console.log('trans');
                    myImgs.style.transitionProperty = 'opacity';
                    myImgs.style.transitionDuration = "1500ms";
                }
                if (myImgs.style.opacity === '1') {
                    console.log('opacity-0');
                    myImgs.style.opacity = '0';
                }

                i++;
                setTimeout(function () {
                    cycle();
                }, 3000);

您的脚本有几个问题。

  1. 初始化时元素上不存在不透明度样式。你需要在你的逻辑中考虑到这一点
  2. 在第二次通过时，不透明度样式确实存在，并且可能为0，因此也需要考虑该条件
  3. 您的第二个if语句会立即反转您在第一个条件语句中所做的操作。如果
  4. 您只循环输入/输出一个图像元素，因此从一个图像到另一个图像的转换无法按预期进行。您要么需要更改为两个元素，要么更改转换策略以适应单个元素

演示小提琴-以上项目1-3

以上1-3的代码已更改：

(function () {
    var myImgs = document.getElementById('vz0');
    var i = 0;
    function cycle() {
        if (i <= 3) {
            var myArray = ['http://jsrun.it/assets/t/r/U/O/trUOT.jpg', 'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg', 'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg', 'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg'];
            myImgs.setAttribute("src", myArray[i]);
            if (myImgs.style.opacity === '' || myImgs.style.opacity == 0) {
                console.log(myImgs.style.opacity + '0');
                myImgs.style.transitionProperty = 'opacity';
                myImgs.style.transitionDuration = "1500ms";
                myImgs.style.opacity = 1;
            } else if (myImgs.style.opacity == 1) {
                console.log(myImgs.style.opacity + '2');
                myImgs.style.opacity = 0;
            }
            i++;
            setTimeout(function () {
                cycle();
            }, 3000);
            if (i === 4) {
                i = 0;
            }
        }
    }
    cycle();
}());

对于上面的第4项，这里有一个重构版本，它使用两个img元素来帮助管理传入和传出的转换：

以上1-4的演示小提琴

HTML:

<div class="imgWrapper">
    <img src="http://jsrun.it/assets/t/r/U/O/trUOT.jpg" id="vz0" class="vzImage" alt="first" height="300" width="300" />
    <img src="http://jsrun.it/assets/t/r/U/O/trUOT.jpg" id="vz1" class="vzImage" alt="first" height="300" width="300" />
</div>

CSS：

.imgWrapper {
    position: relative;
    height: 300px;
    width: 300px;
}
.vzImage {
    opacity:0;
    position: absolute;
    top: 0; left: 0;
    bottom: 0; right: 0;
}

脚本：

(function () {
    var myImgs  = document.getElementsByClassName('vzImage');
    var myArray = ['http://jsrun.it/assets/t/r/U/O/trUOT.jpg', 
                   'http://jsrun.it/assets/6/c/Y/s/6cYsH.jpg', 
                   'http://jsrun.it/assets/w/M/r/i/wMriQ.jpg', 
                   'http://jsrun.it/assets/5/Q/8/f/5Q8fW.jpg'];
    // Consider moving this to .vsImage in stylesheet
    for(var j = 0; j < myImgs.length; ++j) {
        myImgs[j].style.transitionProperty = 'opacity';
        myImgs[j].style.transitionDuration = "1500ms";
    }
    function cycle(i) {
        var myArrayIdx = i % myArray.length;
        var imgIdx     = i % myImgs.length;
        var prevImgIdx = (i-1) % myImgs.length;
        myImgs[imgIdx].setAttribute("src", myArray[myArrayIdx]);
        myImgs[imgIdx].style.opacity = 1;
        if(myImgs[prevImgIdx]) {
            myImgs[prevImgIdx].style.opacity = 0;
        }
        setTimeout(function () {
            cycle(i+1);
        }, 3000);
    }
    cycle(0);
}());

调试的第一条规则。如果If语句中的某些内容没有发生，请查看条件。检查myImgs.style.opacity是否等于0或1。使用console.log(myImgs.style.opacity);，它会显示myImgs.style.opacity等于空字符串。所以你的条件都不会改变。

相关文章：