在这个幻灯片中没有淡出效果JavaScript，CSS和HTML

No fade effect in this slideshow JavaScript, CSS and HTML

本文关键字：JavaScript CSS HTML 淡出 幻灯片      更新时间：2023-09-26

我有一个幻灯片。它有效，但不好看，因为它不会褪色。我正在使用这个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;"

但这并没有奏效！

有人有一个简单的解决方案可以在这个幻灯片中创建渐变效果吗？

您可以使用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>

你的选择！

给它另一个类名，并使用关键帧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;
  }
}
相关文章：