AngularJS輪播圖核心邏輯示例

<div ng-controller="CarouselCtrl">
  <div class="slide" ng-repeat="slide in slides" ng-show="isActive($index)">
    <img ng-src="{{slide.image}}" alt="{{slide.title}}">
    <div class="promo-text">{{slide.desc}}</div>
  </div>
  <button ng-click="prev()">?</button>
  <button ng-click="next()">?</button>
</div>

<script>
  app.controller('CarouselCtrl', function($scope, $interval) {
    $scope.slides = [
      { image: 'ecs-promo.jpg', title: 'ECS Global Sale', desc: 'New users get 50% off' },
      { image: 'security-banner.jpg', title: 'Anti-DDoS Protection', desc: 'Secure your infrastructure' }
    ];
    // 自動(dòng)輪播邏輯
    $interval(() => $scope.next(), 5000);
  });
</script>