<!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的图片轮播效果展示的更多相关文章

  1. 基于bootstrap的图片轮播功能

    插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...

  2. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  3. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  4. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  5. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  6. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  7. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  8. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  9. axure 动态面板实现图片轮播效果（淘宝）

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

随机推荐

  1. StringUtilsd的isEmpty、isNotEmpty、isBlank、isNotBlank

    1. public static boolean isEmpty(String str) 判断某字符串是否为空,为空的标准是 str==null 或 str.length()==0 下面是 Strin ...

  2. glow

    原则是: 先把原场景渲染到fbo,然后渲染发光的物体 然后叠加,但是问题来了,发光物体是另外一个fbo里渲染的,他没和原场景进行深度测试,导致全部绘制了,叠到一起的时候原先不该显示的部分显示 然后我立 ...

  3. Linux下MySQL不能远程访问

    最近在Linux上装了个MySQL数据库,可是远程连接MySQL时总是报出erro 2003: Can't connect to MySQL server on '211.87.***.***' (1 ...

  4. UIWebView 操作

    网络开发中,当公司已经使用 HTML5 技术实现同时适应 Android 和 iOS 等多个平台的网页时,这时往往需要我们 iOS 平台能够嵌入网页并进行各种交互,那我们应该怎么做来实现这种需求呢? ...

  5. .NET 相关工具

    加密工具,反DUMP,反调试,反编译,加密代码资源内容,混淆流程,变量.Confuser is a protector/obfuscator for .NET, providing great sec ...

  6. csv大文件分割以及添加表头

    注:这里说的大文件也不是太大,只有60多M而已(70多万条数据),相对比较大而已. 为了减轻编辑的工作,某种情况下网站上可能用会到csv格式的文件进行数据导入,但一般网站除了有上传文件大小限制以外,还 ...

  7. AppStore新应用上传指南

    目录 [隐藏]  1 提交新应用前的准备工作 2 进入itunesconnect 3 提交新应用的信息 4 上传应用 5 用Application Loader上传应用 6 上传时出错的解决方案 6. ...

  8. 使用go的ssh包快速打造一个本地命令行ssh客户端

    热身运动

  9. Windows上使用clang编译

    - 先自己从源代码 (http://llvm.org/releases/) 编译llvm和clang,或者直接安装clang for Windows - 测试过使用cygwin (https://cy ...

  10. Linux高级编程--07.进程间通信

    每个进程各自有不同的用户地址空间,进程之间要交换数据必须通过在内核中开辟缓冲区,从而实现数据共享. 管道 管道是一种最基本的IPC机制,由pipe函数创建: int pipe(int filedes[ ...