Laksanakan kemahiran carousel_javascript imej Bootstrap dengan mudah-tutorial js-php.cn

Laksanakan kemahiran carousel_javascript imej Bootstrap dengan mudah

WBOY

Lepaskan： 2016-05-16 15:20:26

asal

1112 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod terperinci Bootstrap untuk melaksanakan karusel imej dan berkongsi dengan anda untuk rujukan anda Kandungan khusus adalah seperti berikut

Kod khusus:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <style type="text/css">
 img{
  margin:0 auto;
 }
 </style>
</head>
<body>

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <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>

 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <img src="images/lunbo1.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo2.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo3.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 ...
 </div>

 <!-- Controls -->
 <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>
</body>
</html>

Salin selepas log masuk

Kesan

Parameter pilihan

data-ride=”carousel”: Ia boleh dimainkan secara automatik dan tidak akan dimainkan sehingga klik dibuat.
Tambah tajuk

Tajuk ditulis antara

Contohnya:

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>

Salin selepas log masuk

Di atas adalah pengenalan terperinci kepada karusel imej javascript. Saya harap artikel ini dapat membantu semua orang dalam mempelajari pengaturcaraan javascript.