Auch ohne JS zu lernen, können Sie Bootstrap verwenden, um Karusselldiagramme praktisch anzuwenden.-HTML-Tutorial-php.cn

Auch ohne JS zu lernen, können Sie Bootstrap verwenden, um Karusselldiagramme praktisch anzuwenden.

WBOY

Freigeben： 2016-09-26 08:27:13

Original

1451 Leute haben es durchsucht

Da ich ein Neuling bin und JS noch nicht gelernt habe

Ich habe dazu Bootstrap verwendet. Kopieren Sie den Code direkt in Webstorm

Im Folgenden werde ich anhand einer meiner Aufgaben erklären, was jeder Teil davon bedeutet

(Da der Lehrer mir nicht beigebracht hat, was dieser Code bedeutet, kann ich die Fehler selbst verstehen.)

„Mein Freund hat neue Herbstkleidung“ ist ein Karussell mit insgesamt 3 kleinen Punkten, d. h. Drei Bilder. Verwenden Sie die Pfeile nach links und rechts, um nach links und rechts zu blättern

Als nächstes präsentiere ich den Quellcode: und erkläre jeden Teil nach dem Code

<div class="col-md-9 lunbo">
<br>    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: 1.4285rem">
<br>        <!-- Indicators --><br>        <ol class="carousel-indicators" style="margin-left: -20rem">
<br>            <li data-target="#carousel-example-generic" data-slide-to="0" class="active">     这里规定播放顺序 3个li代表3个小点 点一个小点 就是一张图<br>            <li data-target="#carousel-example-generic" data-slide-to="1">
<br>            <li data-target="#carousel-example-generic" data-slide-to="2">
<br>        </ol>
<br><br>        <!-- Wrapper for slides --><br>        <div class="carousel-inner"> 这里是要播放的图 3张<br>            <div class="item active">这里的active 对应上面active的那个小圆点<br>                <img src="%E4%B8%89%E7%BB%84%E9%A1%B9%E7%9B%AE/PC/PC%E9%A6%96%E9%A1%B5/lunbo1.jpg" alt="Auch ohne JS zu lernen, können Sie Bootstrap verwenden, um Karusselldiagramme praktisch anzuwenden."   style="max-width:90%"><br>                <div class="carousel-caption"></div>
<br>            </div>
<br>            <div class="item">
<br>                <img src="%E4%B8%89%E7%BB%84%E9%A1%B9%E7%9B%AE/PC/PC%E9%A6%96%E9%A1%B5/lunbo2.jpg" alt="Auch ohne JS zu lernen, können Sie Bootstrap verwenden, um Karusselldiagramme praktisch anzuwenden."   style="max-width:90%"><br>                <div class="carousel-caption"></div>
<br>            </div>
<br>            <div class="item">
<br>                <img src="%E4%B8%89%E7%BB%84%E9%A1%B9%E7%9B%AE/PC/PC%E9%A6%96%E9%A1%B5/lunbo3.jpg" alt="Auch ohne JS zu lernen, können Sie Bootstrap verwenden, um Karusselldiagramme praktisch anzuwenden."   style="max-width:90%"><br>                <div class="carousel-caption"></div>
<br>            </div>
<br>        </div>
<br><br>        <!-- Controls -->   这里就是那左右两个箭头<br>        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">上翻<br>            <span class="glyphicon glyphicon-chevron-left"></span><br>        </a><br>        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">下翻<br>            <span class="glyphicon glyphicon-chevron-right"></span><br>        </a><br>    </div>
<br>
</div>

Nach dem Login kopieren

Wenn Sie nur zwei Bilder benötigen, dann ändern Sie den Code selbst, löschen Sie ein Bild und einen Punkt und ändern Sie dort den Punkt

data-slide-to="0" 里面的数字  这里的0 只是举例数字  具体情况 自行判断

Nach dem Login kopieren

Das ist es