基于bootstrap的图片轮播效果展示

<!DOCTYPE html>
<html lang="zh-CN">

<body>

<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>

<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>

<script>
$(".carousel").carousel({
interval: 4000
})
</script>
</body>

</html>

基于bootstrap的图片轮播效果展示的更多相关文章

基于bootstrap的图片轮播功能
插入js及css支持: <link rel="stylesheet" href="css/bootstrap.min.css"/> <scri ...
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始两个区域: ...
利用bootstrap写图片轮播
利用bootstrap写图片轮播缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置以及左右按钮的style也要从新设置 <div class="carousel slid ...
CSS3图片轮播效果
原文:CSS3图片轮播效果在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果图片尺寸统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现工具/原料 axure7.0 方法/步骤下载需要轮播的图片将图片引入至axure中,将引入的第一张图片转为 ...

随机推荐

第一篇HBuilder在这里！
本文作为一个引子,所有相关文章,都会在这里做一个索引,现在还空着.谢谢
worksteal thread pool
worksteal的场景对于一个线程池,每个线程有一个队列,想象这种场景,有的线程队列中有大量的比较耗时的任务堆积,而有的线程队列却是空的,现象就是有的线程处于饥饿状态,而有的线程处于消化不良的状态 ...
[AX2012 R3]关于Named user license report
Named user license报表是用来统计各种授权类型用户数的,这里来看看报表数据具体是如何来的.这是一个SSRS的报表,最主要的数据源是来自于类SysUserLicenseCountRepo ...
python 安装加环境变量
pip install sth --global-option="build_ext" --global-option="-I/usr/local/include&quo ...
EventBus使用介绍
EventBus是Android下高效的发布/订阅事件总线机制.作用是可以代替传统的Intent,Handler,Broadcast或接口函数在Fragment,Activity,Service,线程 ...
java-Filter
java-Filter 过滤器是小型的Web组件,它们负责拦截请求以及响应,以便查看.提取或以某种方式操作正在客户机和服务器之间交换的数据.简单的说,过滤器就类似于客户端发送的web请求与服务器之间的 ...
CGContext 的一些工具方法
/* *设置虚线 *param context CGContext *param context CGContext *param lineDashLengths 如: const CGFloat l ...
Xenia and Bit Operations（线段树单点更新）
Xenia and Bit Operations time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
[0x00 用Python讲解数据结构与算法] 概览
自从工作后就没什么时间更新博客了,最近抽空学了点Python,觉得Python真的是很强大呀.想来在大学中没有学好数据结构和算法,自己的意志力一直不够坚定,这次想好好看一本书,认真把基本的数据结构和算 ...
Swift3.0_注释,警告,todo的写法
一. Swift3.0 不支持写Prama的注释了. 也不能打#warning了. 二. 取代方法 1. 注释: //MARK: - setter & getter 2.警告 //FIXME: ...

基于bootstrap的图片轮播效果展示

基于bootstrap的图片轮播效果展示的更多相关文章

随机推荐

热门专题