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

Question

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

Answer 1

L'adresse de l'image est stockée dans le tableau et l'image par défaut affiche le 0ème élément du tableau. Cliquer sur le bouton ajoutera ou soustraira 1 à l’index de l’élément actuel du tableau. Faites attention au jugement des limites et donnez les invites correspondantes. D'ACCORD.

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

Pour utiliser la fonction de changement d'image de flèche, déclarez simplement le tableau imgList que vous souhaitez afficher dans le contrôleur et mettez-y l'URL de l'image

.

La valeur par défaut est d'afficher le premier en premier, avec index=0 $scope.curImg = imgList[0];

.

Cliquez sur la flèche droite index++, ng-click="toNext()" $scope.curImg = imgList[index]; Définissez simplement ng-src sur la valeur de curImg dans la balise img affichée.

Cliquez de la même manière sur l'index de la flèche gauche--.

Faites également attention au contrôle cliquable des flèches gauche et droite lorsque index=0 et que l'index est le plus grand