Изображения исчезают после исчезающей анимации - PullRequest
Новая
       31

Изображения исчезают после исчезающей анимации

0 голосов
/ 22 октября 2019

На нашем веб-сайте есть слайд-шоу, по которому можно переходить, и изображения переходят от одного к другому, но, когда исчезновение завершено, изображение исчезает. Кажется, непрозрачность установлена ​​на 0, но я не могу понять, почему.

Я запустил код в новом HTML-файле, и он работает нормально, изображения отображаются и не исчезают, но я не могускажем то же самое для моего сайта. 

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

<head>
    <!-- Boostrap -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <!-- Remove Browser Cache -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <!-- Page Properties -->
    <title>Home | Frickit Studios</title>
    <meta name="description" content="Frickit Studios">
    <meta name="author" content="DoctorSoup143">
    <meta property="og:image" content="media/logo.png" />
    <link rel="icon" href="media/logo.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="media/logo.ico" type="image/x-icon" />
    <!-- CSS Links -->
    <link href="https://fonts.googleapis.com/css?family=Teko:300" rel="stylesheet">
    <link rel="stylesheet" href="fonts/fontawesome-free-5.0.13-css/fontawesome-all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <!-- JS Links -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- Push Notifications -->
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function() {
            OneSignal.init({
                appId: "a091703d-4b12-434c-aa24-934282860804",
            });
        });
    </script>

        <style>
        * {box-sizing: border-box}
        body {font-family: Verdana, sans-serif; margin:0}
        .mySlides {display: none}
        img {vertical-align: middle;}

        .slideshow-container{
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        .prev, .next 
        {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width:auto;
            padding: 16px;
            margin-top: -22px;
            color:white;
            font-weight: bold;
            font-size: 18px;
            transition:1s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover, .next:hover
        {
            background-color: rgba(0,0,0,0.8);
        }

        .text 
        {
            color: white;
            font-size: 15px;
            padding: 9px 12px;
            position:relative;
            bottom: 38px;
            width:100%;
            text-align: center;
        }

        .numbertext
        {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        .dot
        {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active, .dot:hover
        {
            background-color: #717171;
        }

        .fade 
        {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 2s;
        }

        @-webkit-keyframe fade 
        {
            from {opacity: .4}
            to {opacity: 1}
        }
        @keyframes fade
        {
            from{opacity: .4}
            to{opacity: 1}
        }

        @media only screen and (max-width: 300px)
        {
            .prev, .next, .text {font-size: 11px}
        }
    </style>
</head>

<body>

    <!-- Nav Bar -->
    <div class="navbar">
        <nav>
            <a href=""><img src="media/logo.png" width="50" height="50"></a>
            <ul>
                <li>
                    <a href="" class="hover_link">Home</a>
                </li>
                <li>
                    <a href="" class="hover_link">SIGMA</a>
                </li>
                <li>
                    <a href="" class="hover_link">About</a>
                </li>
                <li>
                    <a href="" class="hover_link">Contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <br/>
    <br/>
    <br/>
    <br/>

    <!-- Name & Description -->
    <div class="container-fluid">
        <div class="text-div" align="center">
            <p style=" font-size: 45px;">FRICKIT STUDIOS</p>
        </div>

        <!-- SIGMA News & Twitter iFrame -->
        <!--<div class="row justify-content-md-center">
            <div class="col-12 col-md-8">
                <!-- News Slideshow Test -->


        <div class="slideshow-container" style="width: 75%">

                    <div class="mySlides fade">
                        <div class="numbertext">1 / 3</div>
                        <img src="media/Test1.png" style="width: 100%">
                        <div class="text">Caption this, bitch</div>
                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext">2 / 3</div>
                        <img src="media/Test1.png" style="width: 100%">
                        <div class="text">Caption this, pt.2</div>
                    </div>

                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="next" onclick="plusSlides(1)">&#10095;</a> 

                </div>
                <br>

                <div style="text-align:center">
                    <span class="dot" onclick="currentSlide(1)"></span>
                    <span class="dot" onclick="currentSlide(2)"></span>
                </div>

        <script>
        var slideIndex = 1;
        showSlides(slideIndex);

            function plusSlides(n)
            {
                showSlides(slideIndex+=n);
            }
            function currentSlide(n)
            {
                showSlides(slideIndex=n);
            }

            function showSlides(n)
            {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex=1}
                if (n < 1) {slideIndex = slides.length}
                for(i = 0; i < slides.length; i++)
                    {
                        slides[i].style.display = "none";
                    }
                for(i = 0; i < dots.length; i++)
                    {
                        dots[i].className = dots[i].className.replace(" active", "");
                    }
                slides[slideIndex-1].style.display="block";
                dots[slideIndex-1].className += " active";
            }
        </script>
            <!--</div>-->

            <!-- Twitter iFrame -->
            <div class="col-12 col-md-3">
                <a class="twitter-timeline" data-width="100%" data-height="40em" data-theme="dark" href="https://twitter.com/FrickitStudios">Tweets by Frickit Studios</a>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>

        <!-- SIGMA Kickstarter -->
        <div class="row justify-content-md-center">
            <div class="col-12 col-md-3">
                <!-- Kickstarter Text -->
                <div class="text-div" align="center">
                    <p style=" font-size: 35px;">SIGMA On Kickstarter</p>
                    <!-- Kickstarter iFrame -->
                    <iframe class="kickstarter" src="https://www.kickstarter.com/projects/zenithmmo/zenith-the-fantasy-cyberpunk-mmo-game-for-vr-and-desktop/widget/card.html?v=2" width=80% height=500px frameborder="0" scrolling="no"></iframe>
                </div>
            </div>
            <div class="col-12 col-md-8">
                <p style=" font-size: 35px;"> What Does Our Kickstarter Fund?</p>
                <p style=" font-size: 22px;"> -Trademark/Copyright
                    <br> -Improved Version Control
                    <br> -Product Licensing
                    <br> -Sound & Live Music Recording
                    <br> -Legal Consultations
                    <br> -Publishing Fees
                    <br> -Emergency Funds
                    <br> -Asset Creation
            </div>
        </div>
    <!--</div>
            -->

    <!--
    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
        }
    </script>
    -->

    <!-- Particles Background
        <div id="particles-js"></div>
        <script type="text/javascript" src="js/particles.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <br>
        <br>
    -->
    <!--</div>-->

</body>
<footer>
    <!-- Footer -->
    <div class="containner-fluid">
        <div class="footer-inner">
            <img src="media/logo.png" width="80" height="80"></img>
            <div class="social">
                <a href="https://Twitch.tv/DoctorSoup143" class="fab fa-twitch" target="_blank"></a>
                <a href="https://twitter.com/FrickitStudios" class="fab fa-twitter" target="_blank"></a>
                <a href="https://www.youtube.com/channel/UC2LgikNXNwuHifq7XpQD4vA?" class="fab fa-youtube" target="_blank"></a>
            </div>
            <div class="legal">
                <p>©Copyright Frickit Studios - 2019 | <a href="">Privacy Policy</a> | <a href="">Contact</a></p>
            </div>
        </div>
    </div>
</footer>

</html>

Я ожидал, что изображения будут продолжать отображаться после того, как они исчезнут между собой, но они просто исчезнут.

...