bootstrap輪播太慢怎麼設定-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

bootstrap輪播太慢怎麼設定

Jul 11, 2019 pm 01:13 PM

bootstrap

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

bootstrap輪播太慢怎麼設定

##要修改圖片輪播的時間間隔，當然直接修改原始碼是不建議的啦，方法其實很簡單。（推薦學習：

Bootstrap影片教學）

BootStrap輪播圖官方程式碼

&lt;!--data-ride设置图片切换方式为滑动 --&gt;
&lt;div id=&quot;carousel-example-generic&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;!-- 设置轮播图的数量和顺序--&gt;
  &lt;!--data-target的值应与上面的id值对应 --&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carousel-example-generic&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;

  &lt;!-- 要展示的图片信息 --&gt;
  &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;
    &lt;div class=&quot;item active&quot;&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;item&quot;&gt;
      &lt;img src=&quot;...&quot; alt=&quot;...&quot;&gt;
      &lt;div class=&quot;carousel-caption&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/div&gt;
    ...
  &lt;/div&gt;

  &lt;!-- 控制图标 --&gt;
  &lt;a class=&quot;left carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;right carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;glyphicon glyphicon-chevron-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;

登入後複製

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

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

&lt;div id=&quot;carousel-example-generic&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot; data-interval=&quot;1000&quot;&gt;

登入後複製

使用JavaScript語句實作：

官網給的程式碼是：

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

登入後複製

更多Bootstrap相關技術文章，請造訪

Bootstrap教學欄目進行學習！

以上是bootstrap輪播太慢怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

bootstrap輪播太慢怎麼設定

熱門文章

熱門工具標籤

熱門文章

熱門文章標籤

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題