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 21 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery简易手风琴插件的封装
Oct 13 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
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
express.js中间件说明详解
2019/03/19 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python 字符串格式化代码
2013/03/17 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
小小的船教学反思
2014/02/21 职场文书
元旦联欢会主持词
2014/03/26 职场文书
环保建议书300字
2014/05/14 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Redis可视化客户端小结
2021/06/10 Redis
PHP使用QR Code生成二维码实例
2021/07/07 PHP
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
python中数组和列表的简单实例
2022/03/25 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技
Elasticsearch 批量操作
2022/04/19 Python