利用旋转木马中自举旋转木马的综合分析方法

这个例子提供了一个全面的分析使用旋转木马在引导您参考。

源文件：

carousel.scss

carousel.js

实现原理：

隐藏要显示的所有元素，然后指定当前显示的块、宽和高适配。
源代码分析：

1、html结构：主要分为四部分

1.1，容器：最外层的div，需要一个数据轮=旋转木马来指定为轮播放插件，并提供一个ID来促进循环指示符的关联。

1.2、图片列表的一部分，把所有与外层的div，然后每个IMG将div，则类项目。

1.3、循环指示符：用于显示其列表项的OL列表。每个列表项需要指定数据幻灯片到index属性，该属性用于标记当前圆的索引数。

1.4、左右控制按钮：左右移动的功能。

2，CSS样式

2.1，旋转木马：只有一个相对位置标记

2.2，旋转木马内部：旋转图片列表区域，其中每个项目按项目进行修改。

2.2.1，其中活跃，沪指下，并被认为是可见的

2.2.2、旋转木马的描述：表示每个项目应该有标题信息，默认情况下，中间位置

2.3、木马控制：设置按钮的左侧和右侧的按钮，将设置信息梯度和透明度等，并提供一个和另外两样式图标图标下。

2.4，旋转式指示器：样式的圆部分是绝对定位的，每个李被设置为内部块元素，使用文本缩进：- 999隐藏字体。

3，Js密码

3.1。主要的核心方法是幻灯片，他实现了图片的切换。

3.1.1、图像切换第一时间期间，暂停方法来设置定时器暂时。在完成图片切换之后，调用循环方法以启用计时器。

3.1.2的两参数，接受式和下

3.1.2.1、Type说：向上或向下，页

3.1.2.2、下：这是一个次要的项目，显示为一个活动，如果你不通过它，你需要让它通过getitemfordirection方法

3.1.3，$主动（获得项目的当前活动完成（$下），该活动需要的物品），iscycling（定时器定时轮播，手柄）的方向（方向）等基本参数

3.1.4，然后触发slide.bs.carousel事件

3.1.5，然后设置指标项目指标

3.1.6、切换图片，切换动画如果CSS动画的支持，或直接用CSS切换开关

3.1.7、动画切换原理：

3.1.7.1和有滚动图片的权利，并将结合方式：主动权（活动项目）上右（下一项），沪指是100%，和图片在左边。

3.1.7.2，下：是左滚动图片的活动（活动期），左下左（下一项），然后是100%，把图片的右边

3.1.7.3，主动权：图片应该是正确的，然后画面的宽度应该是100%

3.1.7.4，主动离开：画面左，所以你应该运行-画面宽度100%

3.1.7.5，对比图：

3.1.8，实现代码（不包括CSS3）：

转盘内>活动，
转盘内部>下一步，
。旋转木马内>。沪指{
显示块；
}
旋转木马内部>活动{
左：0；
}
转盘内部>下一步，
。旋转木马内>。沪指{
位置：绝对；
顶部：0；
宽度：100%；
}
转盘内部>下{
左：100%；
}
。旋转木马内>。沪指{
左：- 100%；
}
Next.left。转盘内>，
。旋转木马内>。prev.right {
左：0；
}
。旋转木马内>。active.left {
左：- 100%；
}
。旋转木马内>。active.right {
左：100%；
}

如果你想学习，你可以点击这里为你学习更多的精彩话题：学习引导教程

以上是本文的全部内容，希望能帮助大家学习javaｓｃｒｉｐｔ程序设计。