Bootstrap開發(fā)實(shí)戰(zhàn)之響應(yīng)式輪播圖

    本文主要內(nèi)容是在導(dǎo)航條的下方做一張輪播圖，自動播放最新的重要動態(tài)，供大家參考，具體內(nèi)容如下
    一、響應(yīng)式輪播圖
    //響應(yīng)式輪播圖
    <div id="myCarousel">
     <ol>
      <li data-target="#myCarousel" data-slide-to="0"
     ></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
     </ol>
     <div>
      <div>
       <a href="#"><img src="img/slide1.png"></a>
      </div>
      <div>
       <a href="#"><img src="img/slide2.png"></a>
      </div>
      <div>
       <a href="#"><img src="img/slide3.png"></a>
      </div>
     </div>
     <a href="#myCarousel" data-slide="prev">‹</a>
     <a href="#myCarousel" data-slide="next">›</a>
    </div>
    //所需要的 jQuery 控制
    $('#myCarousel').carousel({
     //設(shè)置自動播放/2 秒
     interval : 3000,
    }); 
    //調(diào)整輪播器箭頭位置
    $('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');
    $(window).resize(function() {
     var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();
     $('.carousel-control').css('line-height', $height + 'px');
    }); 
    //所需要的 CSS
    a:focus {
     outline: none;
    }
    .navbar-brand {
     padding: 0;
    }
    #myCarousel {
     margin: 50px 0 0 0;
    }
    .carousel-inner .item img {
     margin: 0 auto;
    }
    .carousel-control {
     font-size: 100px;
    }
    以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助