javascript - 如何在单页应用程序中切换照片？

Question

我有 4 个连续的缩略图，每个图像都与另外 4 个图像相关，我解释说: 主要的 4 个图像是游戏中的 Angular 色(战士、剑客等)，我想点击战士图像并在同一页面中移动到战士装备页面(盔甲、 Boot 武器等)。我在这里尝试了很多方法，但仍然没有成功。 有人可以帮帮我吗？

count = 1;
total = 4;

$(".img-swap1").on('click', function() {

  $(this).fadeOut(400, function() {
    $(this).attr('src', 'images/swordsman' + count + '.jpg');
  }).fadeIn(400);
  count++;
  if (count > total) {
    count = 1;
  }
});

.column {
  float: left;
  width: 18%;
  padding: 14px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 40%;
  height: auto;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <img src="images/swordsman.jpg" class="img-swap1" alt="Swordsman" style="width:100%">
  </div>
  <div class="column">
    <img src="images/Mage-0.png" class="img-swap" alt="Mage" style="width:100%">
  </div>
  <div class="column">
    <img src="images/Warrior-0.png" class="img-swap" alt="Warrior" style="width:100%">
  </div>
  <div class="column">
    <img src="images/GhostFighter-0.png" class="img-swap" alt="GhostFighter" style="width:100%">
  </div>
</div>

Answer 1

我建议您使用一个对象数组，其中包含:图像的链接以及子集的名称。

这样，将来您可以简单地从 json 中获取数组。

实现是这样的:

var sets = [];

sets['default'] = [
{
  link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg",
  set: "swordsman"
},
{
	link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg",
  set: "swordsman"
},
{
	link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg",
  set: "swordsman"
},
{
	link: "https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg",
  set: "swordsman"
} 
];

sets['swordsman'] = [
{
  link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381915.jpg",
  set: "default"
},
{
	link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381921.jpg",
  set: "default"
},
{
	link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381924.jpg",
  set: "default"
},
{
	link: "https://image.shutterstock.com/image-illustration/hero-swordsman-bright-armor-medieval-450w-1288381930.jpg",
  set: "default"
} 
];

$(".img-swap").click(function() {replaceImgSet(this);});

function replaceImgSet(obj) {
var _clicked_elem = obj;
  $(obj).parent().parent().fadeOut(400, function() {
  	var rset = $(_clicked_elem).data("set");
    var rowdiv = $(obj).parent().parent();
    rowdiv.children(".column").remove();
    sets[rset].forEach(function(elem) {
    	var imgdiv = $('<div class="column"></div>');
      var img = $('<img src="'+elem.link+'" data-set="'+elem.set+'" class="img-swap" alt="Mage" style="width:100%">');
      img.click(function() {replaceImgSet(this)});
    	$(rowdiv).append(imgdiv.append(img));
    });
    $(rowdiv).fadeIn();
  });
}

.column {
  float: left;
  width: 18%;
  padding: 14px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}


/* Clear floats after image containers */

.row::after {
  content: "";
  clear: both;
  display: table;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706547.jpg" class="img-swap" data-set="swordsman" alt="Swordsman" style="width:100%">
  </div>
  <div class="column">
    <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706535.jpg" class="img-swap" data-set="swordsman" alt="Mage" style="width:100%">
  </div>
  <div class="column">
    <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1221331996.jpg" class="img-swap" data-set="swordsman" alt="Warrior" style="width:100%">
  </div>
  <div class="column">
    <img src="https://image.shutterstock.com/image-vector/fantasy-rpg-game-character-monsters-450w-1220706532.jpg" class="img-swap" data-set="swordsman" alt="GhostFighter" style="width:100%">
  </div>
</div>