AngularJS：實現輪播圖效果

標籤：des   style   class   blog   code   java   

要實現這個功能，可以https://github.com/sroze/ngInfiniteScroll這個第三方控制項實現的。實現步驟如下：

1. 下載ng-infinite-scroll.js程式http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0

2. 如果你是用的jQuery2.0以上版本，還需要修改ng-infinite-scroll.js程式，將所有的將所有的$window.xxx改為$(window).xxx, elem.xxx改為$(elem).xxx

3. 在HTML中引入script

<script type=‘text/javascript‘ src=‘path/to/jquery.min.js‘></script><script type=‘text/javascript‘ src=‘path/to/angular.min.js‘></script><script type=‘text/javascript‘ src=‘path/to/ng-infinite-scroll.min.js‘></script>

4. HTML範例程式碼如下：

<!-- 輪播圖 --><div>    <carousel interval="myInterval">        <slide ng-repeat="slide in slides" active="slide.active">            <img ng-src="{{slide.image}}" style="margin:auto;">            <div class="carousel-caption">                <p>{{slide.text}}</p>            </div>        </slide>    </carousel></div>

5. PostListController.js代碼如下：

 1 ftitAppModule.controller(‘PostListController‘,  2     function ($scope) { 3         // 設定輪播圖圖片間隔 4         $scope.myInterval = 5000; 5         // 輪播圖資料初始化 6         var slides = $scope.slides = []; 7         // 添加輪播圖源 8         slides.push({ image: ‘/Content/images/carousel_1.png‘, text: ‘親愛的你，情人節快樂‘ }); 9         slides.push({ image: ‘/Content/images/carousel_1.png‘, text: ‘親愛的你，情人節快樂‘ });10 });

最終效果：