非常酷炫的Bootstrap图片轮播动画


Posted in Javascript onMay 27, 2016

对于网站开发者来说,对展示内容增加一个滑动或者是轮播效果的是非常常见的需求。收费和免费的轮播插件多的是不胜枚举。其中很 多提供很多有用的配置选项和动态效果。

很多时候,如果你的项目需要的是一个轻量级的轮播,不需要很多的功能。同时你的项目是采用Bootstrap,(一个最流行的开源前端 框架)的话。你可以参考一下bootstrap官方组件。

这篇文章将展示如何在 Bootstrap轮播上添加有趣的动画效果。同时确保这个js组件自由扩展和快速上手。

介绍Animate.css

为了让我自己写的动画效果值得称赞,我用一个非常有名的开源的CSS3动画库,被形象的称为animate.css。 Dan Eden写的。

这是让我能专注于手头的任务,而不是解释CSS3动画的代码。

用Animate.css 需要2个步骤:

1、在html文档中引入animate.min.css。
2、在网页中要加动画的元素上添加animated yourchosenanimation类。
接下来你用Animate.css网站上的看到的关于动画的类名,代替yourchosenanimation。

引入Bootstrap轮播组件

Bootstrap轮播组件有三个主要的部分。

---轮播指示显示幻灯的页面数量,给用户提供一个视觉线索,并提供可以滑动的导航。
---轮播条目,一个叫.carousel-inner的类,包含在外边框的里边。代表每一个独立的滑块。每个图片里边的都可以放置图片。也可以 添加标题。还可以在html元素上添加carousel-caption类名。Bootstrap会有自带的样式。我们可以通过这些元素添加动画。
---最后,是轮播控制箭头,功能是可以使用户前后滑动。

为了简单的展示demo,就先不加图片了。焦点先放在轮播框架上作为动画。

非常酷炫的Bootstrap图片轮播动画

构建HTML结构

下边是你需要引用到你项目当中的:

jQuery
Bootstrap's CSS and JavaScript
Animate.css
一个 样式表和js文档。

为了加快开发进程,从Bootstrap官网引用了模板和必要的文件。

下边是Bootstrap轮播代码

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
 </li>
 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 </ol>
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">

 <!-- First slide -->
 <div class="item active">
 <div class="carousel-caption">
 <h3 data-animation="animated bounceInLeft">
 This is the caption for slide 1
 </h3>
 <h3 data-animation="animated bounceInRight">
 This is the caption for slide 1
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated zoomInUp">Button</button>
 </div>
 </div><!-- /.item -->

 <!-- Second slide -->
 <div class="item">
 <div class="carousel-caption">
 <h3 class="icon-container" data-animation="animated bounceInDown">
 <span class="glyphicon glyphicon-heart"></span>
 </h3>
 <h3 data-animation="animated bounceInUp">
 This is the caption for slide 2
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated zoomInRight">Button</button>
 </div>
 </div><!-- /.item -->

 <!-- Third slide -->
 <div class="item">
 <div class="carousel-caption">
 <h3 class="icon-container" data-animation="animated zoomInLeft">
 <span class="glyphicon glyphicon-glass"></span>
 </h3>
 <h3 data-animation="animated flipInX">
 This is the caption for slide 3
 </h3>
 <button class="btn btn-primary btn-lg"
 data-animation="animated lightSpeedIn">Button</button>
 </div>
 </div><!-- /.item -->
 </div><!-- /.carousel-inner -->

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic"
 role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>

 <a class="right carousel-control" href="#carousel-example-generic"
 role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>

</div><!-- /.carousel -->

如果以上代码没有错,你在浏览器打开会看到一个可以运行的轮播,上边的一切不包含一行javascript代码。如果你不添加任何图像,

只是在css文档给.carousel .item这个类块添加min-height值防止轮播塌陷。

在轮播标题内的元素添加一个动画属性data-animation,用这个特别的动画类库作为他们的值。

如果你想从Animate.css库体验其他的动画,用你选择的动画类名代替data-animation属性值。

我们在javascript代码中用data-animation属性值。

虽然一个简单的自动轮播在一些案例中可以找到,但是对于这个案例我们有更多的控制。

在这个方向的第一步,从元素中删除data-ride="carousel"值,把data-ride属性值初始化儿不用写任何代码。但是,我们打算用js代码控制轮播,因此,这个data-ride属性就不必要了。

给轮播加CSS样式

现在根据自己的喜好,发挥创造力给轮播标题添加样式。我将要写的样式规则是能顺畅工作的demo。

更具体的说,我们增加动画延迟属性的控制。定义每个动画什么时候开始(注意为了简单演示,省略了浏览器前缀)

.carousel-caption h3:first-child {
 animation-delay: 1s;
}

.carousel-caption h3:nth-child(2) {
 animation-delay: 2s;
}

.carousel-caption button {
 animation-delay: 3s;
}

上面的代码片段中确保元素动画有序开始。还可以做其他的效果。例如,你可以选择前两个标题同时出现。然后是button按钮。可以自 己决定,享受乐趣吧。

写jQuery代码:

我们开始初始化这个轮播,在你的自定义的javascript 文件中添加一下代码:

var $myCarousel = $('#carousel-example-generic');
// Initialize carousel
$myCarousel.carousel();

我们已经动态的设置了轮播,接下来,我们来解决这个动画。

为了使第一个幻灯片的标题有动画,当页面在浏览器加载完后脚本得运行。随后的幻灯片在动画下进入到我们的视野,我们的代码在 slide.bs.carousel 事件上运行。意味着同样的代码运行两次:页面加载一次和slide.bs.carousel 事件一次。

因为我们喜欢遵循不重复的原则,我们打算把我们的代码封装在函数中,并在适当的时候引用。

代码:

function doAnimations(elems) {
 var animEndEv = 'webkitAnimationEnd animationend';
 elems.each(function () {
 var $this = $(this),
 $animationType = $this.data('animation');
 // Add animate.css classes to
 // the elements to be animated 
 // Remove animate.css classes
 // once the animation event has ended
 $this.addClass($animationType).one(animEndEv, function () {
 $this.removeClass($animationType);
 });
 });
}
// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
 .find('[data-animation ^= "animated"]');
// Apply the animation using our function
doAnimations($firstAnimatingElems);
// Pause the carousel 
$myCarousel.carousel('pause');

// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event 
$myCarousel.on('slide.bs.carousel', function (e) { 
 // Select the elements to be animated inside the active slide 
 var $animatingElems = $(e.relatedTarget)
 .find("[data-animation ^= 'animated']");
 doAnimations($animatingElems);
});

上边的代码 我们来分析一下。

来看doAnimations()函数

这个doAnimations() 函数执行的任务如下。

它开始通过缓存变量中含有的animationend事件名称的字符串。这个事件告诉我们,你可能已经猜到,当每个动画结束。我们需要这个 点的信息,因为每一次的动画结束后,我们将animate.css类移除。如果我们不做移除,轮播的标题将只有一次动画,也就是,只是在 第一次轮播显示特定的幻灯片。

var animEndEv = 'webkitAnimationEnd animationend';
接来下,我们的函数循环遍历每一个我们想要有动画的元素,并获取data-animation的属性值。想上边所说的,这个值包含我们想要添 加给元素的Animate.css类,以便有动画效果。

elems.each(function () {
 var $this = $(this),
 $animationType = $this.data('animation'); 
 // etc...
});

最后,这个doAnimations() 函数动态添加animate.css类的每个要执行动画的元素上,当动画结束的时候,还附加了一个事件监听。动 画结束后我们移除从Animate.css添加的类。这样确保下一个轮播灯片回到当前的区域。(你试着删除这段代码,看看会发生什么)

$this.addClass($animationType).one(animEndEv, function () {
 $this.removeClass($animationType);
});

第一个标题的动画

当页面在浏览器中加载时,我们在第一个幻灯片中动画的内容:

var $firstAnimatingElems = $myCarousel.find('.item:first')
 .find("[data-animation ^= 'animated']"); 
doAnimations($firstAnimatingElems);

在这个代码中,我们找到第一张灯片,我们希望通过使用data-animation从动画的标题获取动画属性的值。然后我们把变量 $firstAnimatingElems 当做参数传给doAnimations()函数,然后执行函数。

轮播的停止功能

当第一张灯片内容执行完动画以后,我们停止这个轮播功能。

$myCarousel.carousel('pause');
这是Bootstrap轮播组件防止不停旋转的特征。不停的旋转,可能会让访客生厌。

在这种情况下,我建议确保轮播不直接循环到下一个灯片直到所有的动画运行完毕。可以通过设置在初始化代码中的“间隔”选项来控 制这个:

$myCarousel.carousel({
 interval: 4000
});

在我看来,一个无限循环轮播标题跳跃每一次的滑动进入视线不理想。

轮播幻灯片标题的动画

为每张幻灯片的动画轮播标题变得可见需要以下描述的步骤。

首先,我们在slide.bs.carousel上添加一个事件监听器。

当幻灯片实例方法被调用时,该事件立即触发。

$myCarousel.on('slide.bs.carousel', function (e) { 
 // do stuff...
});

接下来,我们选择当前的灯片,找到我们希望增加动画的元素。下边的代码用了slide.bs.carousel事件的.relatedTarget属性来绑定 动画。

var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
最后,我们调用doAnimations()函数,把$animatingElems当做参数传进去。

doAnimations($animatingElems);

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的拖动布局插件
Nov 25 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
Bootstrap安装环境配置教程分享
May 27 #Javascript
Bootstrap布局方式详解
May 27 #Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 #Javascript
JS组件Bootstrap Table布局详解
May 27 #Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 #Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 #Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
python列表与元组详解实例
2013/11/01 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
使用requests库制作Python爬虫
2018/03/25 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
python读取xml文件方法解析
2020/08/04 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
学生安全承诺书
2014/05/22 职场文书
师范生自荐信模板
2014/05/28 职场文书
论文评审意见
2015/06/05 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python