Question

我在网站顶部使用带有淡入淡出过渡的Bootstrap Carousel。代码如下：

[http://codepen.io/anon/pen/mJxYaz][1]

现在淡化转换在codepen上非常顺利，但是我已经在本地和本地主机服务器上尝试了它，但它在某种程度上是瓶颈的。对于某些幻灯片，转换工作顺利。但是，有时不是褪色，而是将页面变为白色，然后切换到另一张幻灯片。现在我想知道这是由浏览器的JS超时还是我的localhost（或本地）无法处理它的事实引起的。就像我在我自己的网站上有太多的JS / jQuery一样？我知道所有这些代码都是客户端的，所以我怀疑专用服务器是否能做得更好。

我知道这是一个开放式的问题，但我很感激。如果有人能让我知道我能做些什么来使这个运行顺利，而网站还有其他部分。

谢谢！

编辑：如果有人能告诉我如何让褪色看起来更有机并让它不闪现白，我也会感激不尽。

Answer 1

以下是一些如何通过调整CSS来完成此操作的示例。

html, body {
    height: 100%;
}
.navbar-brand {
    width: 70px;
    height: 50px;
    background: url('http://matthewjstrauss.com/wp-content/uploads/2013/07/twitter-bootstrap-logo.png') no-repeat center center;
    background-size: 50px;
}
.navbar {
    background-color: #fff;
}
.carousel, .item, .active {
    height: 100%;
}
.carousel-inner {
    height: 100%;
}
.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.carousel.fade {
    opacity: 1;
}
.carousel.fade .item {
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    left: 0 !important;
    opacity: 0;
    top: 0;
    position: absolute;
    width: 100%;
    display: block !important;
    z-index: 1;
}
.carousel.fade .item:first-child {
    top: auto;
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
    -moz-transition: opacity ease-in-out .7s;
    -o-transition: opacity ease-in-out .7s;
    -webkit-transition: opacity ease-in-out .7s;
    transition: opacity ease-in-out .7s;
    z-index: 2;
}
.carousel-control {
    z-index: 2;
}
footer {
    margin: 0px 25px 25px 25px;
    text-align: center;
}

以下是如何重新构建旋转木马标记以便现在使用CSS。

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
            </button> <a class="navbar-brand" href="#"></a> 
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li> <a href="#">About</a> 
                </li>
                <li> <a href="#">Services</a> 
                </li>
                <li> <a href="#">Contact</a> 
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a>  <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</header>
<img src="http://placehold.it/2100x500/f00/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/266080/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/547842/ffffff One" class="img-responsive" alt="Nope">
<img src="http://placehold.it/2100x500/267842/ffffff One" class="img-responsive" alt="Nope">
<!-- Page Content -->
<div class="container-fluid">
    <hr>
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; Your Website 2014</p>
            </div>
        </div>
        <!-- /.row -->
    </footer>
</div>

一点JS：

  $('.carousel').carousel({
  interval: 5000 //changes the speed
  })

Answer 2

以上工作很有效 - 除了它只需要.item，.active类和填充工作的高度。

.carousel, .item, .active {
width: 100%;
height: 340px;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 340px;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Bootstrap Carousel Fade Transition

2 个答案: