将 Slit Slider 修改后的效果更改为淡入淡出答案

【问题标题】：Change Slit Slider Revised effect to fadein fadeout将 Slit Slider 修改后的效果更改为淡入淡出
【发布时间】：2015-12-07 00:13:11
【问题描述】：

我正在编写一个网站，该网站需要全屏淡入淡出滑块，其中包含内容和下一个上一个导航。所以我找到了this。

但主要问题是我需要这种效果来淡入淡出。

【问题讨论】：

标签： javascript php jquery ajax css

【解决方案1】：

你可以使用引导轮播

http://getbootstrap.com/javascript/#carousel

关于自动生成帮助

http://www.bootply.com/64693

在这里，我用这个小提琴为你提供一种解决方法http://jsfiddle.net/fj75wqwc/

下同：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <style>
    .carousel.carousel-fade .item {
      -webkit-transition: opacity 0.5s ease-in-out;
      -moz-transition: opacity 0.5s ease-in-out;
      -ms-transition: opacity 0.5s ease-in-out;
      -o-transition: opacity 0.5s ease-in-out;
      transition: opacity 0.5s ease-in-out;
      opacity: 0;
    }
    .carousel.carousel-fade .active.item {
      opacity: 1;
    }
    .carousel.carousel-fade .active.left,
    .carousel.carousel-fade .active.right {
      left: 0;
      z-index: 2;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .carousel.carousel-fade .next,
    .carousel.carousel-fade .prev {
      left: 0;
      z-index: 1;
    }
    .carousel.carousel-fade .carousel-control {
      z-index: 3;
    }
  </style>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="page-header text-center">
        <h1>Bootstrap Carousel with fade effect</h1>
      </div>
      <div class="span6 offset3">

        <div id="carousel_fade" class="carousel slide carousel-fade">
          <div class="carousel-inner">

            <div class="item active">
              <!-- you can add any content here-->
              <img src="http://placehold.it/600x400&amp;text=Fade+effect-Page-1">
            </div>

            <div class="item ">
              <!-- you can add any content here-->
              <img src="http://placehold.it/600x400&amp;text=Fade+effect-Page-2">
            </div>

          </div>
          <a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
          <a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(function() {
      $('.carousel').carousel({
        interval: 7000
      })
    })
  </script>
</body>

</html>

【讨论】：