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

基于Bootstrap实现图片轮播效果

 更新时间：2016年05月22日 08:43:16   投稿：lijiao  
这篇文章主要为大家详细介绍了基于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>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js创建子窗口并且回传值示例代码

    js创建子窗口并且回传值示例代码

    本文为大家详细介绍喜爱使用js创建子窗口并且实现回传值的示例，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • JavaScript中的View-Model使用介绍

    JavaScript中的View-Model使用介绍

    这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了5个对象，产出400行代码，实践出一种代码组织模式。
    2011-08-08
  • 移动端js图片查看器

    移动端js图片查看器

    这篇文章主要为大家详细介绍了js图片查看器的制作方法，可以实现图片的滑动等效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS+Canvas实现的俄罗斯方块游戏完整实例

    JS+Canvas实现的俄罗斯方块游戏完整实例

    这篇文章主要介绍了JS+Canvas实现的俄罗斯方块游戏,结合完整实例形式分析了Canvas技术实现俄罗斯方块游戏的步骤、技术难点与相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • javascript异步处理工作机制详解

    javascript异步处理工作机制详解

    笼统地说，异步在javascript就是延时执行。严格来说，javascript中的异步编程能力都是由BOM与DOM提供的，如setTimeout，XMLHttpRequest，还有DOM的事件机制，等等很多。这些东西都有一个共同的特点，就是拥有一个回调函数，实现控制反转。
    2015-04-04
  • js open() 与showModalDialog()方法使用介绍

    js open() 与showModalDialog()方法使用介绍

    项目开发中经常要用到js open() 与showModalDialog()方法，下面有个不错的示例，喜欢的朋友可以研究下
    2013-09-09
  • 小程序实现滑动块效果

    小程序实现滑动块效果

    这篇文章主要为大家详细介绍了小程序实现滑动块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JS+CSS实现闪烁字体效果代码

    JS+CSS实现闪烁字体效果代码

    这篇文章主要介绍了JS+CSS实现闪烁字体效果代码,可实现文字按照指定颜色逐次闪烁显示的功能,代码非常简单实用,需要的朋友可以参考下
    2016-04-04
  • JavaScript生成指定范围随机数和随机序列的方法

    JavaScript生成指定范围随机数和随机序列的方法

    这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-05-05
  • javascript实现简单留言板案例

    javascript实现简单留言板案例

    这篇文章主要为大家详细介绍了javascript实现简单留言板案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02

最新评论