简单的字_简单实现AngularJS轮播图效果

【www.bbyears.com--js教程】

 

Slide {{$index}}

{{slide.text}}

 <scriptsrc="http://apps.bdimg.com/libs/angular.js/1.3.13/angular.min.js"></script>

 <scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular-animate.min.js"></script>

 <scriptsrc="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>

 <scriptsrc="http://cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>

 <script>

 angular.module('myApp', ['ui.bootstrap', 'ngAnimate']).controller('CarouselDemoCtrl', function ($scope) {

  $scope.myInterval = 2000;

  $scope.noWrapSlides = false;

  var slides = $scope.slides = [];

  $scope.addSlide = function () {

  var newWidth = 600 + slides.length + 1;

  slides.push({

   image: 'http://www.jb.com/image/img/20161204212016_909.jpg',

   text: '允儿',

  });

  slides.push({

   image: 'http://www.jb.com/image/img/20161204212035_614.jpg',

   text: '寄语',

  });

  slides.push({

   image: 'http://www.jb.com/image/img/20170111210803_785.jpg',

   text: '宠物',

  });

  slides.push({

   image: 'http://www.jb.com/image/img/20161204212931_644.jpg',

   text: '精灵',

  });

  };

  $scope.addSlide();

 });

 </script>

注:图片是本地的路径

本文来源：http://www.bbyears.com/wangyezhizuo/127236.html