Question

我正在编写一个网站，需要带有内容和下一个上一个导航的全屏渐隐淡出滑块。所以我找到了this。

但主要问题是我需要这种效果才能淡化淡出。

Answer 1

您可以使用bootstrap-carousel

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>

更改Slit Slider修改了fadein fadeout的效果

1 个答案: