此幻灯片JavaScript，CSS和HTML中没有淡入淡出效果

Question

我有幻灯片。 它有效，但看起来并不好，因为它不会褪色。 我正在使用此HTML代码：

<img class="Container2" src="Images/Wedding/Wedding1.jpg" alt="weddings" name="slide" />

这适用于JavaScript

<script language="JavaScript"> 
  var i = 0; 
  var path = new Array(); 
  path[0] = "Images/Wedding/Wedding1.jpg"; 
  path[1] = "Images/Wedding/Wedding2.jpg"; 
  path[2] = "Images/Wedding/Wedding3.jpg"; 

  function swapImage() 
  { 
    document.slide.src = path[i];

    if(i < path.length - 1) 
      i++; 
    else 
      i = 0; 

   setTimeout("swapImage()",20000); 
  } 
  window.onload=swapImage; 
</script>

css只是为了让图像更大。 我试图使用它来创建淡入淡出效果：

opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;"

但这没用！

有没有人有一个简单的解决方案来在这个幻灯片中创建淡入淡出效果？

Answer 1

给它另一个类名，并使用关键帧CSS动画。 尝试这个 ：）

HTML：

<img class="Container2 fade" src="Images/Wedding/Wedding1.jpg" alt="weddings" name="slide" />

CSS：

.fade {
   animation-duration: .5s;
   animation-name: fade-in;
}

@keyframes fade-in {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

Answer 2

你可以使用CSS3过渡实现一个很好的淡入淡出效果，如下面的小提琴所示 （下面的代码片段）

 * { margin: 0; padding: 0; } .pic-wrapper { position: absolute; width: 100%; height: 100%; overflow:hidden; } figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0; /*animation*/ animation: slideShow 42s linear infinite 0s; -o-animation: slideShow 42s linear infinite 0s; -moz-animation: slideShow 42s linear infinite 0s; -webkit-animation: slideShow 42s linear infinite 0s; } .pic-1 { animation-delay: 0s; -o-animation-delay: 0s; -moz-animation-delay: 0s; -webkit-animation-delay: 0s; background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-2 { animation-delay: 6s; -o-animation-delay: 6s; -moz-animation-delay: 6s; -webkit-animation-delay: 6s; background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-3 { animation-delay: 12s; -o-animation-delay: 12s; -moz-animation-delay: 12s; -webkit-animation-delay: 12s; background: url(http://rachelgallen.com/images/mountains.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-4 { animation-delay: 18s; -o-animation-delay: 18s; -moz-animation-delay: 18s; -webkit-animation-delay: 18s; background: url(http://www.rachelgallen.com/images/purpleflowers.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-5 { animation-delay: 24s; -o-animation-delay: 24s; -moz-animation-delay: 24s; -webkit-animation-delay: 24s; background: url(http://www.rachelgallen.com/images/yellowflowers.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-6 { animation-delay: 30s; -o-animation-delay: 30s; -moz-animation-delay: 30s; -webkit-animation-delay: 30s; background: url(http://www.rachelgallen.com/images/daisies.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .pic-7 { animation-delay: 36s; -o-animation-delay: 36s; -moz-animation-delay: 36s; -webkit-animation-delay: 36s; background: url(http://www.rachelgallen.com/images/snowdrops.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } figure figcaption { position: absolute; bottom: 0; text-align:center; background: rgba(0, 0, 0, 0.3); color: #fff; width: 100%; font-size: 1rem; padding: .6rem; } /* keyframes*/ @keyframes slideShow { 0% { opacity: 0.5; transform:scale(1); -ms-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; transform:scale(1); -ms-transform:scale(1); } } @-o-keyframes slideShow { 0% { opacity: 0.5; -o-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -o-transform:scale(1.1); } 100% { opacity: 0; -o-transform:scale(1); } } @-moz-keyframes slideShow { 0% { opacity: 0.5; -moz-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -moz-transform:scale(1.1); } 100% { opacity: 0; -moz-transform:scale(1); } } @-webkit-keyframes slideShow { 0% { opacity: .5; -webkit-transform:scale(1); } 4% { opacity: 1 } 24% { opacity: 1; } 28% { opacity: 0; -webkit-transform:scale(1.1); } 100% { opacity: 0; -webkit-transform:scale(1); } } 

 <div class="pic-wrapper"> <figure class="pic-1"> <figcaption>Daisies</figcaption> </figure> <figure class="pic-2"> <figcaption>Snowdrops</figcaption> </figure> <figure class="pic-3"> <figcaption>Mountains</figcaption> </figure> <figure class="pic-4"> <figcaption>Purple Flowers</figcaption> </figure> <figure class="pic-5"> <figcaption>Yellow Flowers</figcaption> </figure> <figure class="pic-6"> <figcaption>Daisies Again</figcaption> </figure> <figure class="pic-7"> <figcaption>Snowdrops Again</figcaption> </figure> </div> 

但是如果你要分支到jquery，你可以很容易地做这样的事情

 $(document).ready(function() { //INDEX IMAGES SLIDER $(function slider() { //configuration var width = 360; var speed = 1000; var pause = 3000; var current = 1; //cache DOM var $slider = $('#slider'); var $slides = $slider.find('#slides'); var $slide = $slides.find('.slide'); setInterval(function() { //move image the defined width and speed to the left $slides.animate({ 'margin-left': '-=' + width }, speed, function() { //count number of slides and loop back to first from last current++; if (current === $slide.length) { current = 1; $slides.css('margin-left', 0); } }); }, pause); }); }); 

 #slider { width: 360px; height: 250px; overflow: hidden; } #slider #slides { display: block; width: 1440px; height: 400px; margin: 20; padding: 0; } #slider .slide { float: left; list-style: none; height: 250px; width: 360px; } #slider .slide img { width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider"> <ul id="slides"> <li class="slide"><img src="http://www.musicmatters.ie/images/bara2.jpg"></li> <li class="slide"><img src="http://www.musicmatters.ie/images/bara3.jpg"></li> <li class="slide"><img src="http://www.musicmatters.ie/images/volunteer1.jpg"></li> <li class="slide"><img src="http://www.musicmatters.ie/images/volunteer2.jpg"></li> </ul> </div> 

你的选择！