最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
简单实现AngularJS轮播图效果
时间:2017-05-10 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
Slide {{$index}}
{{slide.text}}
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(); });
|