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

Question

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

Answer 1

图片地址存数组，默认图片显示数组的第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("已是第一张");
    }
}

Answer 2

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

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

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

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

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