全面解析多种Bootstrap图片轮播效果


Posted in Javascript onMay 27, 2016

分享了三种Bootstrap图片轮播效果,相信总有一款你满意的!

第一种效果:Bootstrap简单轮播

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
</div> 

</body>
</html>

第二种:带标题轮播(手动)

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播(Carousel)插件的标题</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 <div class="carousel-caption">标题 1</div>
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 <div class="carousel-caption">标题 2</div>
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 <div class="carousel-caption">标题 3</div>
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
</div> 


</body>
</html>

第三种:JS控制自动轮播

<!DOCTYPE html>
<html>
<head>
 <title>BootstrapJS控制轮播</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" 
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
 <!-- 控制按钮 -->
 <div style="text-align:center;">
 <input type="button" class="btn start-slide" value="Start">
 <input type="button" class="btn pause-slide" value="Pause">
 <input type="button" class="btn prev-slide" value="Previous Slide">
 <input type="button" class="btn next-slide" value="Next Slide">
 <input type="button" class="btn slide-one" value="Slide 1">
 <input type="button" class="btn slide-two" value="Slide 2"> 
 <input type="button" class="btn slide-three" value="Slide 3">
 </div>
</div> 
<script>
 $(function(){
 // 初始化轮播
 $(".start-slide").click(function(){
 $("#myCarousel").carousel('cycle');
 });
 // 停止轮播
 $(".pause-slide").click(function(){
 $("#myCarousel").carousel('pause');
 });
 // 循环轮播到上一个项目
 $(".prev-slide").click(function(){
 $("#myCarousel").carousel('prev');
 });
 // 循环轮播到下一个项目
 $(".next-slide").click(function(){
 $("#myCarousel").carousel('next');
 });
 // 循环轮播到某个特定的帧 
 $(".slide-one").click(function(){
 $("#myCarousel").carousel(0);
 });
 $(".slide-two").click(function(){
 $("#myCarousel").carousel(1);
 });
 $(".slide-three").click(function(){
 $("#myCarousel").carousel(2);
 });
 });
</script>


</body>
</html>

在 carousel() 方法中可以设置具体的参数,如:

全面解析多种Bootstrap图片轮播效果

使用时,在初始化插件的时候可以传关相关的参数,如:

$("#slidershow").carousel({
 interval: 3000
});

Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:

.carousel("cycle"):从左向右循环播放;
.carousel("pause"):停止循环播放;
.carousel("number"):循环到指定的帧,下标从0开始,类似数组;
.carousel("prev"):返回到上一帧;
.carousel("next"):下一帧

用data属性控制轮播:

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播(Carousel)插件方法</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-wrap="true" data-interval="1000">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" 
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
 <!-- 控制按钮 -->
 <div style="text-align:center;">
 <input type="button" class="btn start-slide" value="Start">
 <input type="button" class="btn pause-slide" value="Pause">
 <input type="button" class="btn prev-slide" value="Previous Slide">
 <input type="button" class="btn next-slide" value="Next Slide">
 <input type="button" class="btn slide-one" value="Slide 1">
 <input type="button" class="btn slide-two" value="Slide 2"> 
 <input type="button" class="btn slide-three" value="Slide 3">
 </div>
</div> 



</body>
</html>

声明式方法是通过定义 data 属性来实现,data 属性可以很容易地控制轮播的位置。其主要包括以下几种:

1 . data-ride 属性:取值 carousel,并且将其定义在 carousel 上。

2 . data-target 属性:取值 carousel 定义的 ID 名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个 li 上。

3 . data-slide 属性:取值包括 prev,next,prev表示向后滚动,next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器 href 值为容器 4 . carousel 的 ID 名或其他样式识别符。

5 . data-slide-to 属性:用来传递某个帧的下标,比如 data-slide-to="2",可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个 li 上。

在这里需要注意可以为 #slidershow 层添加 slide  样式,使用图片与图片切换效果有平滑感。

<div id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>

除了data-ride="carousel"、data-slide、data-slide-to 以外,轮播组件还支持其他三个自定义属性:

全面解析多种Bootstrap图片轮播效果

如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
 ......
</div>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是针对javascript图片轮播进行的详细介绍,希望本文对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 #Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 #Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 #Javascript
Bootstrap安装环境配置教程分享
May 27 #Javascript
Bootstrap布局方式详解
May 27 #Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 #Javascript
You might like
PHP 作用域解析运算符(::)
2010/07/27 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP中的self关键字详解
2019/06/23 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
寒假思想汇报
2014/01/10 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
食品安全责任书
2014/04/15 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
实习单位指导教师评语
2014/12/30 职场文书
违纪检讨书
2015/01/27 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
Python绘画好看的星空图
2022/03/17 Python