简单的图片库，jquery的新手并寻求指导

Question

好的，所以我有以下内容：http://prntscr.com/b71b2e我正在寻找较小的框来包含图像，而较大的框默认情况下包含所选图像，但在选择时切换到其他图像。我是jquery的新手，我认为这将是新手级别的事情，所以有人可以向我解释我必须做什么吗？

这是我的HTML和CSS：

.photos {
    width:1000px;
    height:1000px;
    margin-right:auto;
    margin-left:auto;
    padding:0px;    
}
.main-photo {
    width:988px;
    height:550px;
    margin-left:5px;
    border: thin solid #666;
    margin-bottom:20px; 
}
.main-photo-text {
    margin-top:500px;
    height:50px;
    width:auto;
    float:left; 
    font-size:200%;
    color:#FFF;
    text-shadow: #000 2px 2px;
    padding-left:10px;
}

//

/

<div class="photos">
<div class="main-photo">
    <div class="main-photo-text">Project Name</div>
</div>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>
<a class="photo" href="#"></a>

</div>

Answer 1

有很多

方法可以做到这一点，你可以使用data-来实现这一点，制作两个容器，一个用于主照片，另一个用于小照片，然后将你的大图像放在主照片容器中，并给他们一个与他们相关的数据名称，如data-target=img1 2 3 ...，并给小照片数据名称，如data-status=img1 2 3等。并将它们放在一个不锚定的div 中。

然后通过给大图像display:none/visibility:hidden或opacity:0，除了第一个图像，因为它将作为默认值可见，或者通过在页面加载时使用JQ淡出它们来使大图像消失。

在 JQuery 中，您将在其上构建函数的主要基础是当有人单击小图像data-status="img1"它将显示data-target名称等于它的div data-target="img1"，其余部分相同，然后您可以执行此操作 https://jsfiddle.net/v7yf880a/

$(document).ready(function () {
  $('div[data-status]').on('click', function () {
    var thsData = $(this).data('status');
    $('div[data-target]').fadeOut(0);
    $('div[data-target="' + thsData + '"]').fadeIn('slow');
  });
});

html, body {
  height: 100%;
}
.photos {
  position: relative;
  width: 100%;
  height: 100%
}
.target {
  width: 100%;
  height: 70%;
  position: relative
}
.target div[data-target] {
  position: absolute;
  background-image: url(http://placehold.it/600x300);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.target div[data-target]:not(:nth-of-type(1)) {
  display: none;
}
.status {
  width: 100%;
  height: 30%;
  float: left
}
.status div[data-status] {
  float: left;
  width: 20%;
  height: 60px;
  background-color: #9b59b6;
  margin: 4px;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="photos">
  <div class="target">
      <div data-target="img1">Project Name1</div>
      <div data-target="img2">Project Name2</div>
      <div data-target="img3">Project Name3</div>
      <div data-target="img4">Project Name4</div>
      <div data-target="img5">Project Name5</div>
      <div data-target="img6">Project Name6</div>
  </div>
  <div class="status">
    <div data-status="img1">Project Name</div>
    <div data-status="img2">Project Name</div>
    <div data-status="img3">Project Name</div>
    <div data-status="img4">Project Name</div>
    <div data-status="img5">Project Name</div>
    <div data-status="img6">Project Name</div>
  </div>
</div>