问题描述
- Angular如何实现图片轮播
-
求问AngularJS如何实现图片轮播功能，或者扔给我个实例的链接..
解决方案
实现首页图片轮播的方法
ViewPager实现图片轮播
Android 实现图片轮播
解决方案二：
参考：
http://www.linuxidc.com/Linux/2015-01/112320.htm
解决方案三：
我这代码..为什么出来的是{{slide.text}}字符串。
<!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>
解决方案四：
链接: http://pan.baidu.com/s/1i3AMMaT 密码: 2mee 自己去下载吧，实在找不到地方发了。
解决方案五：
图片可以显示了，只是轮播用不了。。。
时间： 2024-09-30 21:36:17