如何解決bootstrap輪播太慢問題

這篇文章主要介紹如何解決bootstrap輪播太慢問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

bootstrap是一個非常好用的css框架，里面集成了各種頁面常用到的排版和特效，圖片輪播就是其中之一啦

要修改圖片輪播的時間間隔，當然直接修改源碼是不推薦的啦，方法其實很簡單。

BootStrap輪播圖官方代碼

<!--data-ride設置圖片切換方式為滑動 --><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- 設置輪播圖的數量和順序-->  <!--data-target的值應與上面的id值對應 -->  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>  </ol>  <!-- 要展示的圖片信息 -->  <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="..." alt="...">      <div class="carousel-caption">        ...      </div>    </div>    <div class="item">      <img src="..." alt="...">      <div class="carousel-caption">        ...      </div>    </div>    ...  </div>  <!-- 控制圖標 -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div>

實現輪播圖時間間隔改變的兩種方式

在data-ride后面加上一個屬性data-interval=“millisecond”，其中，millisecond為需要設置的毫秒數，如下：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">

使用JavaScript語句實現：

官網給出的代碼是：

$(function(){$('#carousel-example-generic').carousel({interval:1000});});

以上是“如何解決bootstrap輪播太慢問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！