说明:

1. 幻灯片效果,外面的div有个id="myppt",class="carousel slide"这个是有图片滑动效果,不加就是直接瞬间换图片,data-interval是每张图片停留时间,默认5000毫秒,data-ride="carousel"是页面加载完就自动播放,默认是点击后才会自动播放。

2. 里面有三个小div,分别是:

(1)class="carousel-inner",内容,放图片,每个图片有个类class="item",加个active类表示当前激活。

(2)class="carousel-indicators",指示器,就是下面的三个小圆圈,点哪个就跳到哪张图片,data-slide-to="0"是跳到第0张图片,data-target="#myppt",是确认属于哪个幻灯片组合的(为啥觉得多此一举?都已经在这个大div里面了,难道是为了能操控其他div里的图片?不要还不行,日了狗了!)。

(3)class="carousel-control",左右导航,data-slide="prev"和data-slide="next"是上一页和下一页,跟上面的data-slide-to有异曲同工之妙,href="#myppt",同样同上,这里也可以用data-target="#myppt"。另外,&lssaquo和&rssaquo是大于号,小于号的转义字符,可以设置字体大小,作为左右导航的图标。

其他功能参考http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

     <div id="myppt" class="carousel slide" data-interval="1000" data-ride="carousel">
<div class="carousel-inner">
<img class="item active" src="1.jpg" alt="">
<img class="item" src="2.jpg" alt="">
<img class="item" src="3.jpg" alt="">
</div>
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myppt"></li>
<li data-slide-to = "1" data-target="#myppt"></li>
<li data-slide-to = "2" data-target="#myppt"></li>
</ol>
<a class="carousel-control left" data-slide="prev" href="#myppt">&lsaquo;</a>
<a class="carousel-control right" data-slide="next" href="#myppt">&rsaquo;</a>
</div>

效果图(侵删。。):

Bootstrap学习笔记(7)--轮播的更多相关文章

  1. Bootstrap 学习笔记12 轮播插件

    轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...

  2. BootStrap学习(7)_轮播图

    一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  5. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  6. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  7. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  8. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  9. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  10. Bootstrap历练实例:轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Fragment 简介 基础知识 总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  2. JS性能优化之创建文档碎片(document.createDocumentFragment)

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  3. SQL INNER JOIN

    A INNER JOIN command is queries that combine data from more than 1 table.For two tables that want to ...

  4. Mac那些相见恨晚的技巧

    Mac那些相见恨晚的技巧 https://mp.weixin.qq.com/mp/homepage?__biz=MzAxNzcwMTA4Ng==&hid=2&sn=4f42926a59 ...

  5. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  6. 谋哥:《App自推广》开篇之回到远古人类

    [谋哥每天一干货.第六十八篇] 这两天帮谋天团的杨整体验他的App--"闪聊"的内測新版,改版后这款App命名为"美丫",一款致力于打造国内首款专注于女性社交的 ...

  7. Toast.makeText 方法出错 java.lang.RuntimeException

    接手以前同事留下的代码,今天突然出现了一个bug: java.lang.RuntimeException: Can't create handler inside thread that has no ...

  8. UDP Sockets in C#

    UDP provides an end-to-end service different from that of TCP. In fact, UDP performs only two functi ...

  9. PHP Libxml函数

    PHP Libxml 函数 PHP Libxml 简介 Libxml 函数和常量与 SimpleXML.XSLT 以及 DOM 函数一起使用. 安装 这些函数需要 Libxml 程序包. 在 xmls ...

  10. error: command 'gcc' failed with exit status 1 while installing eventlet

    Ubuntu安装Python包出错解决办法 : sudo apt-get install python-dev sudo apt-get install libevent-dev