脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 图片轮播

基于BootStrap的图片轮播效果展示实例代码

 更新时间：2016年05月23日 11:47:06   作者：腾龙问天  
这篇文章主要介绍了基于BootStrap的图片轮播效果展示实例代码的相关资料,需要的朋友可以参考下

先给大家展示下bootstrap图片轮播图，效果如下所示，如果大家感觉效果还不错，请继续往下阅读，参考实现代码。

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>图片轮播_01</title>
<!-- Bootstrap -->
<link href="../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--
作者：凯尔
时间：2016-02-20
描述：
carousel
date-interval="4000"停留时间/幅图
支持键盘左右方向键对图片进行轮播方向选择
-->
<div class="container">
<div style="width:960px;height: 400px;margin: auto;padding: auto;">
<div id="carousel-example-generic" class="carousel slide">
<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" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../img/图片轮播/pic01.jpg" />
</div>
<div class="item">
<img src="../img/图片轮播/pic02.jpg" />
<!--
图片上要显示的文字
-->
<div class="carousel-caption">
<h3>联想校园大使</h3></div>
</div>
<div class="item">
<img src="../img/图片轮播/pic03.jpg" />
</div>
<div class="item">
<img src="../img/图片轮播/pic04.jpg" />
</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>
</div>
</div>
<!--设定时间间隔，通过JavaScript，这样做相对于css属性设定而言，可以自启动，无需人为进行干预-->
<script>
$(".carousel").carousel({
interval: 4000
})
</script>
</body>
</html>

以上所述是小编给大家介绍的基于BootStrap的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • async/await地狱该如何避免详解

    async/await地狱该如何避免详解

    这篇文章主要给大家介绍了关于async/await地狱该如何避免的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-05-05
  • js格式化金额可选是否带千分位以及保留精度

    js格式化金额可选是否带千分位以及保留精度

    网上搜到的js格式化金额可选是否带千分位以及保留精度，还不错，大家可以学习下
    2014-01-01
  • 采用call方式实现js继承

    采用call方式实现js继承

    这篇文章主要介绍了如何采用call方式实现js继承,需要的朋友可以参考下
    2014-05-05
  • JavaScript惰性求值的一种实现方法示例

    JavaScript惰性求值的一种实现方法示例

    这篇文章主要给大家介绍了关于JavaScript惰性求值的一种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 聊聊JS ES6中的解构

    聊聊JS ES6中的解构

    这篇文章主要介绍了JS ES6中的解构，对解构感兴趣的同学，可以参考下
    2021-04-04
  • JS中向对象中添加对象的3种方法

    JS中向对象中添加对象的3种方法

    这篇文章主要给大家介绍了关于JS中向对象中添加对象的3种方法,在JavaScript中对象可以通过两种方法添加对象,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Js 弹出框口并返回值的两种常用方法

    Js 弹出框口并返回值的两种常用方法

    有时候我们需要在新窗口执行一些代码并讲求将执行的结果返回到这个页面，那么就需要下面的方法，js常用的就是下面这中方法。
    2010-12-12
  • 使用JSON格式提交数据到服务端的实例代码

    使用JSON格式提交数据到服务端的实例代码

    这篇文章主要介绍了使用JSON格式提交数据到服务端的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2018-04-04
  • 判断脚本加载是否完成的方法

    判断脚本加载是否完成的方法

    在“按需加载”的需求中，我们经常会判断当脚本加载完成时，返回一个回调函数，那如何去判断脚本的加载完成呢？
    2009-05-05
  • javascript自动切换焦点控制效果完整实例

    javascript自动切换焦点控制效果完整实例

    这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
    2016-02-02

最新评论