Angular如何实现图片轮播
求问AngularJS如何实现图片轮播功能，或者扔给我个实例的链接..
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Picture carousel</title> <script type='text/javascript' src='angular.js'></script> <script src="//cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script> <script src="//cdn.bootcss.com/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script> <script>angular.module('ftitAppModule',[]).controller('Controller', function ($scope) { // 设置轮播图图片间隔 $scope.myInterval = 5000; // 轮播图数据初始化 var slides = $scope.slides = []; // 添加轮播图源 slides.push({ image: '/images/polygon-8.jpg', text: '心好累..' }); slides.push({ image: '/images/polygon-4.jpg', text: '让一个搞安全的写前端..' }); slides.push({ image: '/images/polygon-25.jpg', text: '想辞职了..' }); }); </script> </head> <body ng-controller="Controller"> <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> </body> </html>2019-07-17 19:06:34赞同 展开评论
相关问答