首页
所有分类
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 相关文章推荐
jquery remove方法应用详解
Nov 22 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
如何用JS模拟实现数组的map方法
Jul 30 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
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
小喇叭(1) 小喇叭开始广播了(1) 温控(1) 微信(2) 增删查改(1) 克隆(1) S-2000(1) 脏读(2) Lifecycle(1) IC-R9500(1)
You might like
php中定义网站根目录的常用方法
2010/08/08 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
Javascript学习笔记之 函数篇（三） : 闭包和引用
2014/11/23 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python实现Event回调机制的方法
2019/02/13 Python
django序列化serializers过程解析
2019/12/14 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python中JWT用户认证的实现
2020/05/18 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python中Yield的基本用法
2020/10/18 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
Python: glob匹配文件的操作
2020/12/11 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
美国女士泳装店：Swimsuits For All
2017/03/02 全球购物
学雷锋活动倡议书
2014/08/30 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
离婚被告答辩状
2015/05/22 职场文书
致运动员赞词
2015/07/22 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Win11查看设备管理器
2022/04/19 数码科技