我有一个包含一些图像文件的目录[例如4个文件]，我想获取目录中存在的图像数量，然后显示第一个图像并允许用户使用某些控制器元素在图像之间切换显示现在显示的图像的编号。 例如： 我有4张图片和页面显示第一张图片和此文字“＆lt;＆lt;＆lt; 1/4＆gt;＆gt;”当用户点击下一个按钮时，它显示下一张图片，文字更改为“＆lt;＆lt; 2 / 4＆gt;＆gt;“和...... 你能告诉我工作的基础吗？我的意思是你可以告诉我我要做什么（不需要附加代码）。我现在在我的页面中使用AngularJS，但如果需要，我也可以使用JQuery（如果使用AngularJS无法做到这一点）。
这是我的html页面，虽然我觉得它不是很有帮助：
<?php require ('functions.php');mob_check(); ?>
<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
<!-- Adding meta information -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Mohsen Nirouzad - http://AproZ.ir">
<!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design -->
<!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag -->
<meta charset="UTF-8">
<title>{{page_title}}</title>
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/w3rtl.min.css">
<link rel="stylesheet" href="assets/css/imagehover.min.css">
<script src="assets/js/angular.min.js"></script>
<style>
img {
width: 100px;
height: 100px;
}
#second_imglist {
position: relative;
right: -100px;
}
#squares {
position: absolute;
top: 630px;
right: 400px;
}
#imgset {
position: relative;
top: 30px;
}
#img_controllers {
position: relative;
top: 90px;
}
</style>
</head>
<body>
<?php require 'variables/date.php'; ?>
<nav class="w3-sidenav w3-white" style="width:15%" id="mySidenav">
<a href="javascript:void(0)" class="english w3-medium">
<?php echo (date('l d m Y')); ?>
</a>
<a href="javascript:void(0)" class="w3-medium"><span><?php $today=persianday(date("l"));echo $today;?></span> <span><?php echo (date('d m Y')); ?></span></a>
<a href="engineers.php" id="first_menuitem">مهندسین مشاور سرابن</a>
<a href="projects.php" class="w3-no-opacity w3-large">پروژه ها</a>
<a href="research.php">پژوهش</a>
<a href="contact.php">ارتباط با ما</a>
<a href="members.php">اعضا</a>
<a href="javascript:void(0)" class="english">English</a>
<div class="w3-center" style="margin-top:50px;">
<a href="index.php" id="linkimg"><img src="assets/img/logo.jpg"></a>
</div>
</nav>
<?php /*
if ($_GET['v']==='desktopview'){
echo '<div data-ng-include="\'variables/sidenav.php\'"></div>';
} elseif ($_GET['v']==='mobileview'){
echo '<div data-ng-include="\'variables/sidenav-responsive.html\'"></div>';
}
if ($_GET['v']==='desktopview'){
echo '<div id="main" style="margin-right: calc(15% + 100px)" class="w3-row-padding">';
} elseif ($_GET['v']==='mobileview'){
echo '<div id="main" class="w3-row-padding">';
}
if ($_GET['v']==='mobileview'){
echo '<span class="w3-opennav w3-text-black w3-xlarge" onclick="w3_open()" id="openNav">☰</span>';
}
*/?>
<div id="main" style="margin-right: calc(15% + 100px)" class="w3-row-padding">
<div class="w3-col s6">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row w3-margin-top" id="imgset">
<div class="w3-col s6" id="first_imglist">
<div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage(1)">
<img data-ng-src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" data-ng-click="selectImage()" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
<div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
<div class="w3-col s6" id="second_imglist">
<div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
<div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
<figure class="imghvr-zoom-out-right" data-ng-click="selectImage()"><img src="{{img1}}" alt="example-image">
<figcaption>
<h3>سلام دنیا!</h3>
<p>این یک متن نمونه است!</p>
</figcaption>
<a href="javascript:void(0)"></a>
</figure>
</div>
</div>
</div>
<div class="w3-col s6 w3-center" id="img_controllers">
<img data-ng-src="{{selectedImage}}" data-ng-if="selectImage" style="width:100% !important;height:100% !important;margin-top:100px" class="w3-hover-opacity w3-round-small">
<div>
<a href="javascript:void(0)" data-ng-click="increasenumber()"><i class="fa fa-arrow-right"></i></a> {{activenumber}}/{{imagesnumber}}
<a href="javascript:void(0)" data-ng-click="decreasenumber()"><i class="fa fa-arrow-left"></i></a>
<a href="javascript:void(0)" data-ng-click="remove()" class="pull-left"><i class="fa fa-close"></i></a>
</div>
</div>
</div>
<div data-ng-include="'variables/footer.html'"></div>
<div class="w3-center" id="squares">
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click=""><i class="fa fa-square-o"></i></a>
</div>
<script src="assets/js/projects.js"></script>
<script>
<?php
if ($_GET['v']==='mobileview'){
echo 'function w3_open() {
document.getElementById("main").style.marginRight = "25%";
document.getElementById("mySidenav").style.width = "25%";
document.getElementById("mySidenav").style.display = "block";
document.getElementById("openNav").style.display = \'none\';
}
function w3_close() {
document.getElementById("main").style.marginRight = "0%";
document.getElementById("mySidenav").style.display = "none";
document.getElementById("openNav").style.display = "inline-block";
}';
}
?>
</script>
</body>
</html>
projects.js：
// Start angularjs application
var application = angular.module('projects', []);
// Setting conroller
application.controller('projects_controller', function ($scope) {
$scope.page_title = 'پروژه ها',
$scope.img1 = 'assets/img/example-image.jpg',
$scope.selectImage = function () {
$scope.selectedImage = $scope.img1;
};
//$scope.selectedImage = $scope.img1;
$scope.imagesnumber = 12,
$scope.firstnumber = 1,
$scope.activenumber = $scope.firstnumber,
$scope.increasenumber = function () {
if ($scope.activenumber === $scope.imagesnumber) {
$scope.activenumber = $scope.firstnumber;
} else {
$scope.activenumber++;
}
}
$scope.decreasenumber = function () {
if ($scope.activenumber === $scope.firstsnumber) {
$scope.activenumber = $scope.imagesnumber;
} else {
$scope.activenumber--;
}
},
$scope.remove = function () {
document.getElementById('img_controllers').style.display = 'none';
};
});
答案 0 :(得分：0)
我要写图像分页静态逻辑，我认为它可以帮助你。
<强> HTML
<img src="first image url" id="1_image" class="image-element">
<img src="second image url" id="2_image" class="image-element">
<img src="third image url" id="3_image" class="image-element">
<a href="javascript:void(0)" id="1" class="pagination-link">
<br>
<a href="javascript:void(0)" id="2" class="pagination-link">
<br>
<a href="javascript:void(0)" id="3" class="pagination-link">
<强> JQuery的
$( document ).ready(function() {
//Hide all images in load event
$('.image-element').hide();
//show default one image in load event.
$('#1').show();
$(.pagination-link).on('click','.pagination-link',function{
//Hide all images using class.
$('.image-element').hide('slow');
var link_id = $(this).id();
//show particular one image using id
$('#'+link_id+"_image").show('slow');
})
});