非常酷炫的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+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
javascript数组去重方法分析
Dec 15 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
Vue实现简单的留言板
Oct 23 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
php header功能的使用
2013/10/28 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
EJB面试题
2015/07/28 面试题
读书活动总结
2014/04/28 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
2014年材料员工作总结
2014/11/19 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
新学期感想
2015/08/10 职场文书
python使用glob检索文件的操作
2021/05/20 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers