非常酷的Bootstrap图片轮播动画

对于网站开发人员来说，在显示的内容中添加滑动或旋转效果是非常常见的需求。而免费的轮播插件多得不胜枚举。其中许多提供了许多有用的配置选项和动态效果。

大多数时候，如果你的项目需要一个轻量级的转盘，你不需要很多功能。同时，如果你的项目采用Bootstrap(最流行的开源前端框架)。您可以参考官方引导组件。

本文将展示如何向Bootstrap转盘添加有趣的动画效果。同时，确保这个js组件可以自由扩展并快速启动。

引入动画。css

为了让自己写的动画效果值得称赞，我使用了一个知名的开源CSS3动画库，名为animate.css，由Dan Eden编写。

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

使用Animate.css有两个步骤：

1.在html文档中引入animate.min.css。2.在网页中要动画化的元素上添加动画化的yourchosenanimation类。接下来，用您在Animate.css网站上看到的动画的类名替换您的chosenanimation。

介绍引导转盘组件。

引导转盘组件有三个主要部分。

-carousel指示显示幻灯片的页数，为用户提供视觉提示并提供滑动导航。旋转木马入口，一个叫。内部转盘包含在外部框架中。代表每个独立的滑块。图片可以放在每个图片里面。您也可以添加标题。您还可以在html元素上添加旋转字幕类名。自举会有自己的风格。我们可以通过这些元素添加动画。-最后是旋转控制箭头，可以让用户前后滑动。

为了简单展示演示，先不添加图片。将旋转木马框架作为动画来关注。

构建HTML结构。

以下是您需要在项目中引用的内容：

Jquery bootstrap的CSS和JavaScript animate.css的一个样式表和js文档。

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

以下是引导转盘代码：

div id=' carousel-example-generic ' class=' carousel slide ' data-ride=' carousel '！-指示器-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=' 2 '/Li/ol！-幻灯片包装器- div class='旋转木马-内部'角色='listbox '！-第一张幻灯片-div class='项目活动' div class='转盘-标题' h3数据-动画='动画弹跳左'这是幻灯片1 /h3的标题H3数据-动画='动画弹跳右'这是幻灯片1 /h3的标题巴顿=' BTN BTN-初选BTN-LG '数据-动画='动画zoomInUp '按钮/div/div！- /.项目-!-第二张幻灯片-div class=' item ' div class=' carousel-caption ' H3 class=' icon-container ' data-animatic=' animated bounkindown ' span class=' glyphicon glyphicon-heart '/span/H3数据-animated bounkinup=' animated bounkinup '这是第二张幻灯片的标题/H3按钮=' BTN BTN-主要BTN-LG '数据-动画='动画zoomnight '按钮/div/div！- /.项目-!-第三张幻灯片-div class=' item ' div class=' carousel-caption ' H3 class=' icon-container ' data-animatic zoomminleft ' span class=' glyphicon glyphicon-glass '/span/H3 data-animatic=' animatic flipInX '这是第三张幻灯片的标题/H3按钮=' BTN BTN-初选BTN-LG '数据-动画='动画lightSpeedIn '按钮/div/div！- /.项目- /div！- /.旋转木马-内部-!-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 class=' Sr-only ' previous/span/a class=' right carousel-control ' href=' # carousel-example-generic ' role=' button ' data-slide=' next ' span class=' glyphicon-chevron-right ' aria-hidden=' true '-/。旋转木马-如果以上代码没有错，你在浏览器打开会看到一个可以运行的轮播，上边的一切不包含一行爪哇岛描述语言代码。如果你不添加任何图像，

只是在钢性铸铁文档给。旋转木马。项目这个类块添加最小高度值防止轮播塌陷。

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

如果你想从Animate.css库体验其他的动画，用你选择的动画类名代替数据动画属性值。

我们在爪哇岛描述语言代码中用数据动画属性值。

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

在这个方向的第一步，从元素中删除数据传输="转盘"值，把数据传输属性值初始化儿不用写任何代码。但是，我们打算用射流研究…代码控制轮播，因此，这个数据传输属性就不必要了。

给轮播加半铸钢钢性铸铁(铸造半钢)样式

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

更具体的说，我们增加动画延迟属性的控制。定义每个动画什么时候开始（注意为了简单演示，省略了浏览器前缀)。转盘-标题h 3:第一个孩子{动画-延时： 1s}.旋转木马-标题h 3: th-child(2){动画-延迟： 2s}.转盘-字幕按钮{动画-延时： 3s}上面的代码片段中确保元素动画有序开始。还可以做其他的效果。例如，你可以选择前两个标题同时出现。然后是按钮按钮。可以自己决定，享受乐趣吧。

写框架代码：

我们开始初始化这个轮播，在你的自定义的爪哇岛描述语言文件中添加一下代码：

var $ myCarousel=$(' # carousel-example-generic ')；//初始化旋转木马$ mycarousel。carousel()；我们已经动态的设置了轮播，接下来，我们来解决这个动画。

为了制作第一张幻灯片标题的动画，脚本必须在页面加载到浏览器后运行。下面的幻灯片进入我们的动画视图，我们的代码在slide.bs.carousel事件上运行。这意味着相同的代码运行两次：页面加载一次，slide.bs.carousel事件运行一次。

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

代码：

函数doaniminations(elems){ var animEndEv=' webkitaniminationend animation end '；elems . each(function(){ var $ this=$(this)，$ animation type=$ this . data(' animation ')；//将animate.css类添加到//要制作动画的元素//一旦动画事件结束，就移除animate.css类//this . addclass($ animation type)。一个(animEndEv，function(){ $ this . remove class($ animation type)；});});}//在load var $ first animatinglems=$ my carousel . find(' . item : first ')页面的第一张幻灯片中选择要制作动画的元素//。查找('[数据-动画^='动画']')；//使用我们的函数应用动画动画($ first animatingelems)；//暂停转盘$myCarousel.carousel(“暂停”)；//将我们的doAnimations()函数附加到//carousel的slide.bs.carousel事件$ my carousel . on(' slide . bs . carousel '，函数(e) { //选择要在活动幻灯片中进行动画处理的元素var $ animatinglems=$(e . related target)。查找('[数据-动画^='动画']')；doAnimations(动画问题)；});让我们分析一下上面的代码。

看看doAnimations()函数。

doAnimations()函数执行以下任务。

它首先缓存变量中包含的动画和事件名称字符串。这个事件告诉我们，你可能已经猜到了每一个动画是什么时候结束的。我们需要这一点的信息，因为在每个动画之后，我们移除了animate.css类。如果我们不移除它，旋转木马的标题只会被动画化一次，也就是说，只有特定的幻灯片会显示在第一个旋转木马中。

var animEndEv=' webkitAnimationEnd animation end '；接下来，我们的函数循环遍历每一个我们想要制作动画的元素，并获得数据的属性值——动画。如上所述，这个值包含了我们想要添加到元素中的Animate.css类，这样才有动画效果。

elems . each(function(){ var $ this=$(this)，$ animation type=$ this . data(' animation ')；//等等.});最后，这个doAnimations()函数动态添加要动画化的animate.css类的每个元素，当动画完成时，它还会附加一个事件监视器。动画结束后，我们移除从动画中添加的类。这确保了下一个转盘将返回到当前区域。你试着删除这段代码，看看会发生什么。

$this.addClass($animationType)。一个(animEndEv，function(){ $ this . remove class($ animation type)；});第一个标题的动画。

当页面加载到浏览器中时，我们将第一张幻灯片中的内容：制作成动画。

var $ first animatinglems=$ my carousel . find(' . item : first ')。查找('[数据-动画^='动画']')；doAnimations(第一个动画问题)；在这段代码中，我们找到了第一个光块，我们希望通过使用数据-动画从动画的标题中获得动画属性的值。然后我们将变量$ firstAnimatingElems作为参数传递给doAnimations()函数，然后执行该函数。

转盘的停止功能。

当第一个光膜的内容动画完成后，我们停止这个轮播功能。

$myCarousel.carousel('暂停')；这是引导转盘防止不停旋转的功能。继续旋转，这可能会惹恼游客。

在这种情况下，我建议确保转盘不会直接循环到下一部电影，直到所有动画都完成。您可以通过在初始化代码中设置“间隔”选项来控制这一点：

$ MyCarousel . carousel({ interval : 4000 })；在我看来，无限循环旋转木马标题每次都跳起来滑入视野并不理想。

旋转幻灯片标题的动画。

要使动画轮播标题对每张幻灯片可见，需要执行以下步骤。

首先，我们在slide.bs.carousel上添加一个事件侦听器

当调用slide实例方法时，会立即触发此事件。

$ my carousel . on(' slide . bs . carousel '，function (e) { //do stuff.});接下来，我们选择当前的光膜，并找到我们想要添加动画的元素。下面的代码使用。绑定动画的slide.bs.carousel事件的relatedTarget属性。

var $ animatinglems=$(e . related target)。查找('[数据-动画^='动画']')；最后，我们调用doAnimations()函数，并传入$ animatingelemens作为参数。

doAnimations(动画问题)；

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

精彩话题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播。

这就是本文的全部内容。希望对大家的学习有帮助，希望大家多多支持我们。