简单的图片库，jquery 新手，正在寻找指导答案

【问题标题】：Simple image gallery, new to jquery and looking for guidance简单的图片库，jquery 新手，正在寻找指导
【发布时间】：2016-05-22 22:53:21
【问题描述】：

好的，我有以下内容：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>

【问题讨论】：

这方面有 100 多个插件和教程。这个网站的问题太宽泛了

标签： javascript jquery html css

【解决方案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>

【讨论】：