BootStrap中jQuery插件Carousel实现轮播广告效果


Posted in jQuery onMarch 27, 2017

轮播广告在网站中的应用实在是太常见了,下面说一说怎样使用bootstrap中的Carousel插件来实现轮播广告效果,下图为最终效果:

BootStrap中jQuery插件Carousel实现轮播广告效果

具体实现方法请看下面的代码:

<div class="carousel slide" data-ride="carousel" id="carousel" data-interval="3000"> //data-interval设置轮播间隔为3秒钟
 <!-- 广告序号指示器(表示当前第几张的下方的几个小圆圈),可加可不加 -->
 <ol class="carousel-indicators">
  <li data-target="#carousel" data-slide-to="0"></li>
  <li data-target="#carousel" data-slide-to="1" class="active"></li>
  <li data-target="#carousel" data-slide-to="2"></li>
  <li data-target="#carousel" data-slide-to="3"></li>
 </ol>
 <div class="carousel-inner">
  <div class="item">
   <img src="img/02.jpg" alt=""/>
   <!-- 为广告添加说明文字,在图片上中下方显示,可加可不加 -->
   <div class="carousel-caption">
    <h3>First slide label</h3>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
   </div>
  </div>
  <div class="item active">
   <img src="img/03.jpg" alt=""/>
   <!-- 为广告添加说明文字,在图片上中下方显示,可加可不加 -->
   <div class="carousel-caption">
    <h3>Second slide label</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   </div>
  </div>
  <div class="item">
   <img src="img/04.jpg" alt=""/>
   <!-- 为广告添加说明文字,在图片上中下方显示,可加可不加 -->
   <div class="carousel-caption">
    <h3>Third slide label</h3>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
   </div>
  </div>
  <div class="item">
   <img src="img/05.jpg" alt=""/>
   <!-- 为广告添加说明文字,在图片上中下方显示,可加可不加 -->
   <div class="carousel-caption">
    <h3>Fourth slide label</h3>
    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
   </div>
  </div>
 </div>
 <!-- 上一张的按钮,可加可不加 -->
 <a class="left carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <!-- 下一张的按钮,可加可不加 -->
 <a class="right carousel-control" href="#carousel" rel="external nofollow" rel="external nofollow" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
 </a>
</div>

如代码中注释,广告序号指示器,广告的说明文字,以及上一张、下一张的按钮都是可以根据需要自行添加的。

可以在carousel类中添加data-interval扩展属性来更改轮播的时间间隔。

以上所述是小编给大家介绍的BootStrap中jQuery插件Carousel实现轮播广告效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery中的deferred使用方法
Mar 27 #jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
You might like
PHP的引用详解
2015/02/22 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
django 常用orm操作详解
2017/09/13 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
你对IPv6了解程度
2016/02/09 面试题
函授自我鉴定范文
2014/02/06 职场文书
说明书格式及范文
2014/05/07 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis