0

我无法通过使用 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);
4

2 回答 2

0

您的脚本有几个问题。

  1. 初始化时元素上不存在不透明度样式。您需要在逻辑中考虑到这一点
  2. 在第二次通过时，不透明度样式确实存在并且可能为 0，因此也需要考虑该条件
  3. 您的第二个 if 语句立即反转您在第一个条件中所做的事情。该语句应该在 else-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);
}());
于 2013-09-04T16:55:21.750 回答
0

调试的第一条规则。如果 IF 语句中的某些内容没有发生，请查看条件。您检查是否myImgs.style.opacity等于 0 或 1。使用console.log(myImgs.style.opacity);它会告诉您myImgs.style.opacity等于空字符串。因此，您的任何条件都不会触发。

于 2013-09-03T21:06:57.317 回答