The example in this article explains the detailed code of Bootstrap to implement image carousel and shares it with you for your reference. The specific content is as follows
Specific code:
<!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>
Effect
Optional parameters
The title is written between
<div class="carousel-caption"> <h3>果壳推书正式上线</h3> <p>好书分享、经验交流</p> </div>
The above is a detailed introduction to javascript image carousel. I hope this article will be helpful to everyone in learning javascript programming.