图像淡入下一张图像

Question

我有一张图片幻灯片，上面有一个上一个/下一个按钮。我有点卡住了，当你点击箭头时，我试图让图像淡入下一个。我尝试了@keyframe动画以获得淡入淡出，但它只是先淡入背景，然后加载下一个动画。

var slideIndex = 1;

showSlide(slideIndex);

function plusSlides(n){

showSlide(slideIndex += n);

}

function currentSlide(n) {

showSlide(slideIndex = n);

}

function showSlide(n){

var i;

var slides = document.getElementsByClassName("myslides");

if (n > slides.length) { slideIndex = 1};

if (n < 1) { slideIndex = slides.length};

for (i=0;i<slides.length;i++) {

slides[i].style.display = "none";

};

slides[slideIndex-1].style.display = "block";

}


function toggleImage(id) {
    var image = document.getElementById(id);
    image.style.display = image.style.display == "none" ? "block" : "none";
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
  toggleImage('image3')
  toggleImage('image4')
}

* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
/*   background-color: #6E92A1; */
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
/*   background-color: #b0d5d0; */
  background-color: #99EDCC;
}

.logo {
  float: left;
  padding-top: 1em;
/*   padding-bottom: 1em; */
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
	font-weight: 700;
/*   line-height: 50px; */

}

.logo a {
  text-decoration: none;
  font-size: 1em;
  color: black;
}

.nav {
  background-color: #232324;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 80%;
  float: right;
}

li {
  display: inline-block !important;
  border-right: 1px solid #656568;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

li:last-child{
  border-right: none;
}

li a {
  text-decoration: none;
  text-align: center;
  color: white;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

li a:hover {
  color: #99EDCC;
}

.text {
  background-color: black;
  padding: .75em 0 .75em 0;
}

p {
  color: #656568;
  text-align: center;
  font-size: 1em;
  font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
  padding-bottom: 2.5em;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
/*   width: auto; */
  max-width: 100%;
  position: relative;
/*   height: 700px !important; */
/*   max-height: 800px !important; */
  max-height: 1000px !important;
/*   padding-bottom: 30px; */
}

.myslides{
  display: none;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
/*   border-radius: 0 3px 3px 0; */
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

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

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

.caption{
  text-align: center;
  position: absolute;
  bottom: 6px;
  width: 100%;
  color: #f2f2f2;
  text-shadow: 2px 2px 4px black;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
  padding-bottom: .75em;
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

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

@keyframes fade{
  from {opacity: 0.4;}
  to {opacity: 1;}
}

@media(max-width: 768px) {
  #slideshow-container img{
    max-height: 600px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 75%;
  }
  .logo {
    width: 25%;
    text-align: center;
  }
 .logo a {
    font-size: .75em;
  }
  li {
    padding-right: .75em !important;
    padding-left: .75em !important;
  }
}
  
@media(max-width: 420px) {
  #slideshow-container img{
    max-height: 400px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 65%;
  }
  .logo {
    width: 35%;
    text-align: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">

<div class="header">
  <div class="logo">
    <a href="">Gabriella Farfan</a>
  </div>
  <div class="nav">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
  </div>
</div>



<div id="slideshow-container">
  
<div class="text">
  <p>Click on the image to see the before and after</p>
</div>

  <div class="myslides fade">
    <div><img id="image1" onclick="toggleBoth()"  src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
      <img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
    </div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img id="image3" onclick="toggleBoth()" src="https://hairstylesdeep.com/wp-content/uploads/2017/07/black-weave-hairstyles-with-bangs-straight-weave-hairstyles-with-side-bangs-easy-casual-hairstyles.jpg">
    <img id="image4" onclick="toggleBoth()" style="display:none;" src="https://hairstylesware.co/wp-content/uploads/2017/02/long-straight-weaves-for-black-women-long-straight-with-bangs-weave-hairstyles-for-black-women.jpg">
    </div>
      <div class="caption">Text 2</div>
  </div>

  <div class="myslides fade">
    <div><img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050"></div>
      <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
    <div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
      <div class="caption">Text 4</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="dots" onclick="currentSlide(1)"></span> 

<span class="dots" onclick="currentSlide(2)"></span> 

<span class="dots" onclick="currentSlide(3)"></span> 

<span class="dots" onclick="currentSlide(4)"></span> 

</div> -->