javascript - 此幻灯片中没有淡入淡出效果 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

您可以使用 CSS3 过渡实现良好的淡入淡出效果，如 fiddle 所示。 (下面的片段)

* {
    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>

你的选择!