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中。< / p>

然后通过向display:none / visibility:hidden或opacity:0提供除了第一张图片以外的大图片消失，因为它将作为默认值显示或通过使用JQ淡出它们页面加载。

在JQuery中，您将在其上构建函数的主要基础是，当点击小图像data-status="img1"时，它会显示data-target名称等于data-target="img1"的div并且对于其余的一样，那么你可以这样做https://jsfiddle.net/v7yf880a/

＆＃13;

$(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');
  });
});

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

简单的图片库，新的jquery和寻找指导

1 个答案: