基于Bootstrap实现图片轮播效果
作者：lijiao 发布时间：2024-04-28 10:19:50
标签：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>
0
投稿猜你喜欢
- 1. 关于 try.. finally..假如上帝用 python 为每一个来到世界的生物编写程序，那么除去中间过程的种种复杂实现，最不可避
- pandas中有时需要按行依次对.csv文件读取内容，那么如何进行呢？我们来完整操作一遍，假设我们已经有了一个.csv文件。# 1.导入包i
- 使用python批量修改文本文件编码格式把文本文件的编码格式进行批量幻化，比如ascii， gb2312， utf8等，相互转化，字符集的大
- 0.触发器的基本概念触发器是一种特殊的存储过程，它在插入，删除或修改特定表中的数据时触发执行，它比数据库本身标准的功能有更精细和更复杂的数据
- 以下函数列出某个目录下（包括子目录）所有文件，本随笔重点不在于递归函数的实现，这是一个很简单的递归，重点在于熟悉Python 库os以及os
- 问题：SQL Server 2005中如何利用xml拆分字符串序列？解答：下文中介绍的方法比替换为select union all方法更为见
- 一、ready函数的实现经常用jQuery类库或其他类库中的ready方法，有时候想想它们到底是怎么实现的，但是看了一下jQuery中的源码
- 1、选取最适用的字段属性 MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建
- ASP里两种常用的生成文件的方式是：利用ADODB.Stream生成文件和利用Scripting.FileSystemObject生成文件1
- 以下是服务端代码var HTTPREQUEST_PROXYSETTING_DEFAULT = 0;var&nb
- 1. 设置fomat格式，如下: # 取前5个字符，跳过4个字符华，再取3个字符 format = '5s 4x 3s' 2
一，问题因为我想在我的服务器上部署两个vue项目，但是vue打包后默认的项目名是dist，这样子就跟我上一个vue项目冲突了。因此查了一下资- 导语：Python如何下载网页上的图片呢？今天小编给大家分享另一个Python应用小程序，就是：用Python控制摄像头录制视频！学会了也可
- 假设我们有一个数据集，列名叫status下面有100万的数据，其中包装 “HUMAN_REFUSE”,”SYS_REFUSE”,”HUMAN
- pycharm全局修改pycharm 全局改函数方法1ctrl shift r全局替换方法2点击函数，右键 Refactor Ch
- 本文旨在分类讲述执行计划中每一种操作的相关信息。数据访问操作 首先最基本的操作就是访问数据。这既可以通过直接访问表，也可以通过访问索引来进行
- 源码：from pyecharts import Barimport reimport requestsnum=0b=[]for i in
- 希望通过本文能够帮助大家顺顺利利通过Python面试，之后还有一篇关于Python Web相关的文章欢迎大家阅读。1、Python中pass
- 比如，在使用DWR的时候，如果你想传递下拉框的参数到后台的话，此时就需要先获取到下拉框的值了。 其实想要获取到下拉框的值是很简单的。 最关键
- 话不多说 直接上代码<el-upload :action="actionUrl&q
