首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

全面解析多种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程序设计有所帮助。

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

- Author -

Lost blog

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
javascript生成大小写字母
Jul 03 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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
L4X25T(1) Grundig(1) D1835(1) SANGEAN(1) 德生PL330(2) ATS-909X(1) PHILIPS(3) 山进(2) 飞利浦(2) D1875(1)
You might like
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
Python之PyUnit单元测试实例
2014/10/11 Python
Python生成数字图片代码分享
2017/10/31 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python函数基本使用原理详解
2020/03/19 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
加拿大高尔夫超市：Golf Town
2018/01/12 全球购物
百思买加拿大：Best Buy Canada
2018/03/20 全球购物
一组SQL面试题
2016/02/15 面试题
更夫岗位责任制
2014/02/11 职场文书
交通安全责任书范本
2014/07/24 职场文书
食品安全演讲稿
2014/09/01 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript