基于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中,将引入的第一张图片转为 ...

随机推荐

PS 如何改变一个icon的颜色
好吧,码农被逼到一定程度也会自己出手的. PS:如何改变图标颜色新建一个图层,设置前景色为你想要的前景色,按Alt+Delete键用前景色填充该图层,将该图层拖到这个图片所在图层的上方,按Ctrl+ ...
GCC 编译使用动态链接库 LD
可以把当前路径加入 /etc/ld.so.conf中然后运行ldconfig,或者以当前路径为参数运行ldconfig 2.把当前路径加入环境变量LD_LIBRARY_PATH中3. 如果你觉得不会引 ...
关于android中线性布局的layout_gravity属性
当 android:orientation="vertical" 时, 只有水平方向的设置才起作用,垂直方向的设置不起作用.即:left,right,center_horizon ...
深入浅出 nginx lua 为什么高性能
最近很多人问我nginx lua的优势是什么?为什么? 一.同步和异步.阻塞和非阻塞如果要说清楚这个问题首先要了解:同步和异步.阻塞和非阻塞的关系同步:php.java的正常代码都是同步执行的异 ...
makeJar
task makeJar(type: Jar) { //指定生成的jar名 baseName 'plugin' //从哪里打包class文件 from('build/intermediates/cla ...
Android动态设置android:drawableLeft|Right|Top|Bottom 并根据分辨率自适应
http://blog.sina.com.cn/s/blog_4b93170a0102e1m9.html //调用setCompoundDrawables时,必须调用Drawable.setBound ...
tengine + mysql + nginx + php
tengine + mysql + nginx + php 1.配置防火墙vim /etc/sysconfig/iptables # 允许80端口通过防火墙-A INPUT -m state --st ...
Apache配置多个网站的方法
Apache的虚拟主机是一种允许在同一台机器上,运行超过一个网站的解决方案.虚拟主机有两种,一种叫基于IP的(IP-based),另一种叫基于名字的(name-based).虚拟主机的存在,对用户来说 ...
从头构建自己的Linux系统
2012-09-10 在博文“Linux系统启动过程分析”中我们了解了linux系统的启动流程,今天我们就来手动一步一步从头来构建一个最小的linux系统,然后用模拟器将其加载起来.常见 ...
aliyun ubuntu mysql
http://www.codingyun.com/article/38.html ------------ python install mysql module ubuntu下mysql-pytho ...

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

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

随机推荐

热门专题