cari

Rumah >hujung hadapan web >tutorial js >Laksanakan kemahiran carousel_javascript imej Bootstrap dengan mudah

Laksanakan kemahiran carousel_javascript imej Bootstrap dengan mudah

WBOY
WBOYasal
2016-05-16 15:20:261142semak imbas

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>

Kesan

Parameter pilihan

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

Tajuk ditulis antara 37d760be2884a8731575e6abd7ceaaba16b28748ea4df4d9c2150843fecfba68 Contohnya: 

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>
Di atas adalah pengenalan terperinci kepada karusel imej javascript. Saya harap artikel ini dapat membantu semua orang dalam mempelajari pengaturcaraan javascript.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern_javascriptArtikel seterusnya：Pelajari corak reka bentuk JavaScript - kemahiran proksi pattern_javascript

Artikel berkaitan

Lihat lagi