我们在我们的网站上提供了一个幻灯片演示，您可以单击该幻灯片，并且图像会从一个图像淡入另一个图像，但是，当淡入淡出完成时，图像就会消失。似乎不透明度设置为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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
我希望图像在彼此之间逐渐消失后继续显示，但是它们只是消失了。