CSS Fading Slideshow Начальные изображения застряли - PullRequest
Новая
       6

CSS Fading Slideshow Начальные изображения застряли

0 голосов
/ 25 января 2020

Я взял код из здесь и изменил его для моего слайд-шоу. В моем слайд-шоу оно полностью исчезает и исчезает.

Моя проблема только в том, что в начале все изображения в формате PNG накладываются друг на друга. У меня есть шаблон возврата к исходному проекту. И я должен использовать только HTML и CSS3, как это уже здесь. Я создаю слайд-шоу для Confluence, и я ограничен, чтобы сделать все это в теге "body".

Любые идеи приветствуются. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!--

For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
-->



<body>
    <style>

        @-webkit-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-moz-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-o-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        #overview-slideshow {
            position: relative;
            height: 300px;
            width: 300px;
        }

        #overview-slideshow img {
            position: absolute;
            left: 0;
        }

        #overview-slideshow img {
            --duration: 24s;
            -webkit-animation-name: slideshowFadeInOut;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: var(--duration);

            -moz-animation-name: slideshowFadeInOut;
            -moz-animation-timing-function: ease-in-out;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: var(--duration);

            -o-animation-name: slideshowFadeInOut;
            -o-animation-timing-function: ease-in-out;
            -o-animation-iteration-count: infinite;
            -o-animation-duration: var(--duration);

            animation-name: slideshowFadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: var(--duration);
        }

        #overview-slideshow img:nth-of-type(1) {
            --delay: 21s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(2) {
            --delay: 18s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(3) {
            --delay: 15s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(4) {
            --delay: 12s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(5) {
            --delay: 9s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(6) {
            --delay: 6s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(7) {
            --delay: 3s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(8) {
            --delay: 0s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

    </style>


    <div id="overview-slideshow" class="shadow">
        <img src="blank.png">
        <img src="Iso.png">
        <img src="blank.png">
        <img src="Top.png">
        <img src="blank.png">
        <img src="Front.png">
        <img src="blank.png">
        <img src="Side.png">
    </div>
</body>

</html>

1 Ответ

0 голосов
/ 31 января 2020

Я использовал тот же ресурс, что и вы, чтобы создать слайд-шоу. Для меня изображения быстро загружаются подряд перед началом слайд-шоу. Это то, что с тобой происходит?

Мое решение состояло в том, чтобы дать каждому из изображений различный z-индекс, чтобы они загружались позади первого: 

img:nth-of-type(1) {
    z-index: 3;
}

img:nth-of-type(2) {
    z-index: 2;
}
img:nth-of-type(3) {
    z-index: 1;
}

Надеюсь, это поможет .

...