利用AngularJS实现了一个简单版的Bootstrap Carousel，即单击Next或Prev按钮时能翻看后一张或前一张图片。 在这里总结一下，有些地方我自己也存在疑惑，望各位不吝赐教。
Bootstrap Carousel实现步骤
1、这个方法很方便，不需要再额外编写js代码按照此方法即可实现此效果，看相关代码：
点滴积累：
通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
2、先看一下相关的HTML片段，div.item的id是为了方便说明添加的，与实现无关。
<div class="carousel">
<div class="carousel-inner">
<div class="item" id="item1">
<img src="img1" alt=""/>
</div>
<div class="item active" id="item2">
<img src="img2" alt=""/>
</div>
<div class="item" id="item3">
<img src="img3" alt=""/>
</div>
</div>
</div>在上面的示例代码中，我们要轮流播放img1、img2和img3三张图片。当前显示的是img2（因为item2属于active类），下一张要显示的图片假设是img3。 具体步骤如下（利用jQuery代码说明）：
- $('#item3').addClass('next');(将#item3放在#item2的右侧，但是被浏览器隐藏起来)
- var reflow = $('#item3')[0].offsetWidth;（ 这一步非得做吗？我自己实验了一下，如果不重绘UI，好像效果也一样 ）
- $('#item2 #item3').addClass('left');(这会导致#item2和#item3同时向左平移， bootstrap的css文件中注册了item类元素针对translate属性的transition)
- 当平移结束时，$('#item2').removeClass('active left'); $('#item3').removeClass('next left').addClass('active');
AngularJS实现
先看index.html中的代码片段
<body>
<div ng-app="app">
<div class="row">
<div class="col-md-2">
<div ng-controller="CarouselController">
<carousel current-slide="currentSlide" forward="forward">
<slide ng-repeat="img in images">
<img ng-src="{
{img}}" alt=""/>
</slide>
</carousel>
<button ng-click="prev()" class="btn btn-primary">Prev</button>
<button 
最低0.47元/天 解锁文章
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
