Question

所以我的图片库有点问题。当我按下上一个/下一个按钮时，我希望我的图像淡入下一个或上一个图像。但是我还有一个切换功能，当您单击图像时，它会更改为另一图像。

该切换开关适用于前两张图像，但在过渡过程中丢失了淡入淡出功能。我该怎么办，才能同时启用切换和淡入功能？

如果我将javascript代码从更改为

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

到

slides[i].style.opacity = "0"; slides[slideIndex-1].style.opacity = "1";

渐变效果很好，但是我失去了切换效果。

这是codepen：https://codepen.io/GabriellaFarfan/pen/VBYQGy。

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')
  toggleImage('image3')
  toggleImage('image4')
}

$(document).ready(function(){
  $(".next").click(function(){
    $("")
  });
});

* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
  background-color: #ECAAAC;
}

.logo {
  float: left;
  padding-top: 1em;
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
    font-weight: 700;
}

.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: #ECAAAC;
}

.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;
  height: 1000px !important;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  height: 960px;
}

.myslides {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next{
  right: 0;
}

.prev:hover,.next:hover{
/*   color: #b0d5d0 ; */
/*   background-color: rgba(0,0,0,0.8); */
}

.caption{
  text-align: center;
  position: absolute;
  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-top: 1.25em;
}

@media(max-width: 798px) {
  #slideshow-container {
    height: 640px !important;
  }
  #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: 468px) {
    #slideshow-container {
    height: 440px !important;
  }
  #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://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
      <img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.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>

Answer 1

除了不显示任何内容外，显示块还尝试使用可见性和可见性以及过渡：0.5s和不透明度0/1

图像过渡淡入

1 个答案: