Wo wird die Bootstrap-Karussellzeit eingestellt?

Freigeben: 2019-07-31 14:05:39
Original
5661 Leute haben es durchsucht

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>
Nach dem Login kopieren

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">
Nach dem Login kopieren

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

$(&#39;.carousel&#39;).carousel({interval: 2000});
Nach dem Login kopieren

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});});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!