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最大的時候的左右箭頭可點擊的控制