angular.js - ionic menggabungkan angularjs dengan klik kiri dan kanan pada anak panah untuk menukar imej. Saya hanya tahu bahawa ionik mempunyai fungsi karusel automatik.

Question

Ionic menggabungkan angularjs dengan klik kiri dan kanan pada anak panah untuk menukar imej. Saya hanya tahu bahawa ionik mempunyai fungsi karusel automatik

Answer 1

Alamat imej disimpan dalam tatasusunan, dan imej lalai memaparkan elemen ke-0 tatasusunan. Mengklik butang akan menambah atau menolak 1 pada indeks elemen tatasusunan semasa. Beri perhatian kepada penghakiman sempadan dan berikan gesaan yang sepadan. OK.

Kod:

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

Untuk menggunakan fungsi penukaran imej anak panah, hanya isytiharkan tatasusunan imgList yang anda mahu paparkan dalam pengawal dan letakkan url imej di dalamnya

Lalainya ialah untuk memaparkan gambar pertama dahulu, dengan index=0

Klik anak panah kanan index++, ng-click="toNext()" $scope.curImg = imgList[index]; Hanya tetapkan ng-src kepada nilai curImg dalam teg img yang dipaparkan.

Begitu juga klik pada indeks anak panah kiri--.

Juga perhatikan kawalan boleh klik anak panah kiri dan kanan apabila indeks=0 dan indeks adalah yang terbesar