编程 Javascript

轻松实现Bootstrap图片轮播

Posted in Javascript onApril 20, 2020

本文实例讲解了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>

效果

轻松实现Bootstrap图片轮播

可选参数

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

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

例如：

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

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

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

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

轻松实现Bootstrap图片轮播

- Author -

Superpan2015

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 无提示关闭浏览器页面的代码

Mar 09 Javascript

ajax java 实现自动完成功能

Dec 19 Javascript

Javascript中call的两种用法实例

Dec 13 Javascript

Google 地图获取API Key详细教程

Aug 06 Javascript

JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】

Jan 23 Javascript

Cropper.js 实现裁剪图片并上传(PC端)

Aug 20 Javascript

微信小程序数据存储与取值详解

Jan 30 Javascript

微信小程序实现全局搜索代码高亮的示例

Mar 30 Javascript

微信小程序用户信息encryptedData详解

Aug 24 Javascript

JS执行控制之节流模式实例分析

Dec 21 Javascript

vue中动态select的使用方法示例

Oct 28 Javascript

angular *Ngif else用法详解

Dec 15 Javascript

探析浏览器执行JavaScript脚本加载与代码执行顺序

Jan 12 #Javascript

学习JavaScript设计模式之策略模式

Jan 12 #Javascript

基于jQuery1.9版本如何判断浏览器版本类型

Jan 12 #Javascript

jQuery版本升级踩坑大全

Jan 12 #Javascript

基于jQuery实现点击最后一行实现行自增效果的表格

Jan 12 #Javascript

7个jQuery最佳实践

Jan 12 #Javascript

实例详解jQuery Mockjax 插件模拟 Ajax 请求

Jan 12 #Javascript