Heim  >  Artikel  >  Web-Frontend  >  Wo wird die Bootstrap-Karussellzeit eingestellt?

Wo wird die Bootstrap-Karussellzeit eingestellt?

尚
Original
2019-07-31 14:05:395626Durchsuche

Wo wird die Bootstrap-Karussellzeit eingestellt?

Offizieller Code des BootStrap-Karusselldiagramms:

<!--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>

Zeitintervall des Karusselldiagramms auf zwei Arten implementieren zum Ändern:

1. Fügen Sie nach data-ride ein Attribut data-interval="millisecond" hinzu, wobei millisecond die Anzahl der Millisekunden ist, die wie folgt festgelegt werden müssen:

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

Verwenden Sie JavaScript-Anweisungen zur Implementierung:
Der auf der offiziellen Website angegebene Code lautet:

$(&#39;.carousel&#39;).carousel({interval: 2000});

Er kann nicht direkt mit diesem Code implementiert werden. Ein Funktionsausdruck sollte wie folgt vor der Methode hinzugefügt werden :

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

Empfohlen: Bootstrap-Einführungs-Tutorial

Das obige ist der detaillierte Inhalt vonWo wird die Bootstrap-Karussellzeit eingestellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn