看看这张照片：
image http://up.20script.ir/file/35b5-photo-2016-07-19-01-01-05.png
我想制作像图片中方块一样的正方形，以便在我的照片集之间切换。每组包含6张图片，请描述最简单的方法。没问题，如果你使用JQuery或Angular JS或纯javascript ...谢谢。 更新：如果你需要，这是我的HTML代码:(我知道它不起作用，因为我不知道如何做到这一点......）
<?php require ('functions.php');mob_check(); ?>
<!DOCTYPE html>
<html lang="fa-IR" data-ng-app="engineers" data-ng-controller="engineers_controller">
<!-- Website design by Mohsen_Nirouzad -->
<head>
<script src="assets/js/angular.min.js"></script>
<!-- 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 name="application-name" content="Sarabon website">
<meta name="description" content="{{description}}">
<meta name="keywords" content="{{keywords}}">
<meta name="publisher" content="{{publisher}}">
<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">
<script src="assets/js/jquery-3.1.0.min.js"></script>
</head>
<body>
<div data-ng-include="'variables/sidenav.html'"></div>
<div style="margin-right:25%" class="w3-row">
<div class="w3-col s6 w3-margin-right">
<div data-ng-include="'variables/logo1.html'"></div>
<div id="engineers_text" style="margin-top:50px;width:300px;">
<div>
<p id="activetext"></p>
</div>
<div class="pull-left">
<a href="javascript:void(0)" id="changer1"><i id="font1"></i></a>
<a href="javascript:void(0)" id="changer2"><i id="font2"></i></a>
</div>
</div>
<div style="width:300px;" class="w3-margin-top">
<div id="engineers_images" class="w3-row-padding">
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
</div>
<div id="engineers_images_two" class="w3-row-padding">
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
<i class="fa fa-3x fa-file-image-o w3-col m4"></i>
</div>
<div class="pull-left">
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click="change_image_1"><i data-ng-class="image_1"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click="change_image_2"><i data-ng-class="image_1"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click="change_image_3"><i data-ng-class="image_1"></i></a>
<a href="javascript:void(0)" hreflang="fa-IR" data-ng-click="change_image_4"><i data-ng-class="image_1"></i></a>
</div>
</div>
</div>
<div class="w3-rest" style="margin-top:100px">
<img alt="{{image_alt}}" title="{{image_title}}" src="{{image_src}}" class="w3-hover-opacity w3-card-2 w3-hover-shadow w3-round w3-padding fa-border">
<a href="javascript:void(0)"><i class="fa fa-arrow-circle-right"></i></a>
<a href="javascript:void(0)"><i class="fa fa-arrow-circle-left"></i></a>
<a href="javascript:void(0)"><i class="fa fa-close pull-left"></i></a>
</div>
</div>
<div data-ng-include="'variables/footer.html'"></div>
<script>
$(function () {
var text1 = 'لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...لورم ایپسوم دالر سیت آمت...';
var text2 = 'Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...Lorem Ipsum Dolor sit Amet...';
var font_class1=
$('#activetext').text(text1);
$('a#changer1').click(function () {
$('#activetext').text(text1);
$('#font1').addClass('fa fa-square');
$('#font2').addClass('fa fa-square-o');
});
$('a#changer2').click(function () {
$('#activetext').text(text2);
$('#font2').addClass('fa fa-square');
$('#font1').addClass('fa fa-square-o');
});
});
// Coded by Mohsen_Nirouzad
// Start AngularJS Application
var application = angular.module('engineers', []);
// Set controller
application.controller('engineers_controller', function ($scope) {
// Seting page meta information
$scope.description = 'Some Description',
$scope.keywords = 'key1,key2,key3',
$scope.application_name = 'Sarabon',
$scope.googleplus_url = '#',
$scope.page_title = 'مهندسین مشاور سرابن',
});
</script>
</body>
</html>