脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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的图片轮播效果展示实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JavaScript时间格式化函数功能及使用示例

    JavaScript时间格式化函数功能及使用示例

    这篇文章主要为大家介绍了JavaScript时间格式化函数功能及使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • ASP中进行HTML数据及JS数据编码函数

    ASP中进行HTML数据及JS数据编码函数

    在有些时候我们无法控制乱码的出现, 比如发送邮件的时候有些邮件显示乱码, 比如Ajax返回数据总是乱码. 怎么办?
    2009-11-11
  • JavaScript动态提示输入框输入字数的方法

    JavaScript动态提示输入框输入字数的方法

    这篇文章主要介绍了JavaScript动态提示输入框输入字数的方法,实例分析了javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS实现随机抽选获奖者

    JS实现随机抽选获奖者

    这篇文章主要介绍了JS实现随机抽选获奖者，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 原生js实现水平方向无缝滚动

    原生js实现水平方向无缝滚动

    这篇文章主要为大家详细介绍了原生js实现水平方向无缝滚动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • json格式数据的添加，删除及排序方法

    json格式数据的添加，删除及排序方法

    这篇文章主要介绍了json格式数据的添加，删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加、删除与排序的实现技巧,需要的朋友可以参考下
    2016-01-01
  • JavaScript实现班级抽签小程序

    JavaScript实现班级抽签小程序

    这篇文章主要为大家详细介绍了JavaScript实现班级抽签小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 微信小程序实现一键登录

    微信小程序实现一键登录

    这篇文章主要为大家详细介绍了微信小程序实现一键登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • js实现新年倒计时效果

    js实现新年倒计时效果

    这篇文章主要介绍了js实现2015年新年倒计时效果，很快就要迎接新的一年，想知道距离2016还有多少天吗？大家可以参考一下这篇文章
    2015-12-12
  • 计算世界完全对称日的js代码，粗糙版

    计算世界完全对称日的js代码，粗糙版

    世界完全对称日，指的是公历纪年日期中数字左右完全对称的日期，这一天朋友们可以互送祝福同时让大家感叹时间的宝贵。
    2011-11-11

最新评论