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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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
B2K与车机的中波PK
2021/03/02 无线电
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
yii2安装详细流程
2018/05/23 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python圣诞树编写实例详解
2020/02/13 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python 瀑布线指标编写实例
2020/06/03 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
优秀毕业生推荐信
2013/11/02 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
springcloud整合seata
2022/05/20 Java/Android