如何只用AngularJs实现图片滑动切换？
答案:3 悬赏:0
解决时间 2021-01-19 03:03
- 提问者网友：斑駁影
- 2021-01-18 03:02
如何只用AngularJs实现图片滑动切换？
最佳答案
- 二级知识专家网友：琴狂剑也妄
- 2021-01-18 04:04
首先需要理解ng的指令，剩下的原理都是一样的东西。
1.定义一个swipe指令
2.封装touch事件，ng官方已经提供了ngTouch
3.监测事件，进行CSS控制制作动画过度效果(这个用css3还是老式的easing看自己了)
4.放到页面中使用
1.定义一个swipe指令
2.封装touch事件，ng官方已经提供了ngTouch
3.监测事件，进行CSS控制制作动画过度效果(这个用css3还是老式的easing看自己了)
4.放到页面中使用
全部回答
- 1楼网友：街头电车
- 2021-01-18 06:43
1. 下载ui-bootstrap.js程序http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js 目前版本是0.11.0
2. 在HTML中引入script
3. HTML示例代码如下：
{{slide.text}}
4. PostListController.js代码如下：
ftitAppModule.controller('PostListController',
function ($scope) {
// 设置轮播图图片间隔
$scope.myInterval = 5000;
// 轮播图数据初始化
var slides = $scope.slides = [];
// 添加轮播图源
slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' });
slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' });
});
2. 在HTML中引入script
3. HTML示例代码如下：
{{slide.text}}
4. PostListController.js代码如下：
ftitAppModule.controller('PostListController',
function ($scope) {
// 设置轮播图图片间隔
$scope.myInterval = 5000;
// 轮播图数据初始化
var slides = $scope.slides = [];
// 添加轮播图源
slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' });
slides.push({ image: '/Content/images/carousel_1.png', text: '亲爱的你，情人节快乐' });
});
- 2楼网友：污到你湿
- 2021-01-18 05:15
我暂时保留我的看法！
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息！
大家都在看
推荐信息