angular.js - ionic combines angularjs with left and right clicks on the arrows to switch images. How to do this? I only know that ionic has an automatic carousel function.

Question

Ionic combines angularjs with left and right clicks on the arrows to switch images. How to do this? I only know that ionic has an automatic carousel function

Answer 1

The image address is stored in the array, and the default image displays the 0th element of the array. Clicking the button will add or subtract 1 to the index of the current array element. Pay attention to boundary judgment and give corresponding prompts. OK.

Code:

//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

To use the arrow image switching function, just declare the imgList array you want to display in the controller and put the image url in it.

The default is to display the first one first, with index=0. $scope.curImg = imgList[0];

Click the right arrow index++, ng-click="toNext()" $scope.curImg = imgList[index]; Just set ng-src to the value of curImg in the displayed img tag.

Similarly click on the left arrow index--.

Also pay attention to the clickable control of the left and right arrows when index=0 and the index is the largest