更改狹縫滑塊修改後的效果淡入淡出

-1

我正在編寫一個網站，需要帶有內容和下一個導航的全屏幕淡入淡出滑塊。所以我找到了this。更改狹縫滑塊修改後的效果淡入淡出

但主要的問題是，我需要這個效果，淡入淡出。

來源

2014-10-12 tauser2422363

您可以使用引導傳送帶

對於自動根幫助

http://www.bootply.com/64693

在這裏，我給一個變通爲你與th是撥弄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>

來源

2014-10-12 07:41:03

更改狹縫滑塊修改後的效果淡入淡出

回答

相關問題