非常酷炫的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中的ajax分页实现代码
Sep 20 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
js密码强度实时检测代码
Mar 02 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
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下删除字符串中HTML标签的函数
2008/08/27 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
Python操作Excel之xlsx文件
2017/03/24 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
成人大专生实习期的自我评价
2013/10/02 职场文书
信息部岗位职责
2013/11/12 职场文书
拉拉队口号
2014/06/16 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
学生会招新宣传语
2015/07/13 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
导游词之山东孔庙
2019/11/04 职场文书
小学三年级作文之写景
2019/11/05 职场文书