angular.js - ionic结合angularjs左右点击箭头实现图片切换,这个怎么做? 我只知道ionic有个自动轮播的功能
高洛峰
高洛峰 2017-05-15 17:10:14
0
2
759

ionic结合angularjs左右点击箭头实现图片切换,这个怎么做? 我只知道ionic有个自动轮播的功能

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
滿天的星座

图片地址存数组,默认图片显示数组的第0个元素。点击按钮就对当前数组元素的index加或者减1。注意边界判断,给出对应提示。ok了。

代码:

//html
<img src="currentImage"/>
<button type="button" ng-click="change("next")">向前</button>
<button type="button" ng-click="change("back")">向后</button>
//controller
var currentIndex = 0;
$scope.images = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
$scope.currentImage = $scope.images[currentIndex];
$scope.change=function(des){
    if(des === "next"){
        ++currentIndex < $scope.images.length? $scope.currentImage = $scope.images[currentIndex]:alert("已是最后一张");
    }else{
        --currentIndex > 0 ? $scope.currentImage = $scope.images[currentIndex]:alert("已是第一张");
    }
}
Ty80

做箭头图片切换功能,只要在控制器中声明你要的显示的imgList数组,里面放图片url.

默认是第一张先显示,有个index=0. $scope.curImg = imgList[0];

点击向右的箭头index++, ng-click="toNext()" $scope.curImg = imgList[index]; 给显示的img标签内设置ng-src为curImg的值就好了.

同样的点击向左的箭头index--.

还有注意index=0和index最大的时候的左右箭头可点击的控制

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板