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

【字号: 日期:2022-12-26浏览:20作者:雯心

问题描述

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

问题解答

回答1:

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

代码:

//html<img src='https://www.6hehe.com/wenda/currentImage'/><button type='button' ng-click='change('next')'>向前</button><button type='button' ng-click='change('back')'>向后</button>//controllervar 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('已是第一张'); }}回答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最大的时候的左右箭头可点击的控制

相关文章: