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 form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现简单QQ聊天框
Aug 27 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调用VC编写的COM组件实例
2014/03/29 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
python友情链接检查方法
2015/07/08 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
机械工程师岗位职责
2014/06/16 职场文书
师范生见习报告
2014/10/31 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
投标承诺函范文
2015/01/21 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
导游词之天津古文化街
2019/11/09 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers