信鸽网

轻松实现Bootstrap图片轮播

  作者：bea

本文实例讲解了Bootstrap实现图片轮播的详细代码，分享给大家供大家参考，具体内容如下 具体代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstra

本文实例讲解了Bootstrap实现图片轮播的详细代码，分享给大家供大家参考，具体内容如下


具体代码：




<!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>


效果



可选参数



  • data-ride=”carousel”：加上可以自动播放，不加点击后才会播放。

  • 添加标题


标题写在 <div class="carousel-caption"></div>之间
例如：




<div class="carousel-caption">

 <h3>果壳推书正式上线</h3>

 <p>好书分享、经验交流</p>

</div>


如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程


精彩专题分享：jQuery图片轮播 JavaScript图片轮播


以上就是针对javascript图片轮播进行的详细介绍，希望本文对大家学习javascript程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: