Question

这是我到目前为止所做的：

jQuery('.button1').click(function() {
  jQuery('.group1').css('transform', 'translateX(-200%)');
});

jQuery('.button2').click(function() {
  jQuery('.group1').css('transform', 'translateX(0%)');
});

.pagewrap {
  position: relative;
  width: 100%;
}

.pagewrap img {
  max-width: 100%;
}

.hero-bg {
  position: absolute;
  width: 100%;
}

.hero-bg img {
  width: 100%;
}

.btnwrap {
  position: relative;
  text-align: center;
}

.button {
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  margin: 0 1%;
  cursor: pointer;
  border: 1px solid;
  text-align: center;
  color: hotpink;
}

.group1,
.group2 {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  white-space: nowrap;
  transition: all 2s;
}

.one6 {
  width: 16.6667%;
  display: inline-block;
  box-sizing: border-box;
  padding: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pagewrap">
  <div class="hero-bg">
    <img src="http://placekitten.com/g/1500/830">
  </div>
  <div class="btnwrap">
    <div class="button button1">GROUP 1
    </div>
    <div class="button button2">GROUP 2
    </div>
  </div>
  <div class="groupwrap">
    <div class="group1">
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=1">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=2">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=3">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=4">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=5">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=6">
      </div>
    </div>
    <div class="group2">
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=7">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=8">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=9">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=10">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=11">
      </div>
      <div class="one6">
        <img src="https://loremflickr.com/200/200?random=12">
      </div>
    </div>
  </div>
</div>

我想要完成的是当页面加载时，用户只能看到第一组图像。第二组图像应该与第一组内联的页面右侧不可见。单击组2按钮时，.group1中的图像应向左滑动，而.group2图像从右侧滑入，取代group1。然后，如果单击组1按钮，则会再次显示group1。我很难让第二组与第一组内联，同时保持组现在的中心。

Answer 1

.group2你需要一种相反的风格，以便.group1从显示开始，.group2不在视野中

CSS

.group2 {
  transform: translateX(-200%);
}

js / button events

jQuery('.button1').click(function() {
  jQuery('.group1').css('transform', 'translateX(0)');
  jQuery('.group2').css('transform', 'translateX(-200%)');
});

jQuery('.button2').click(function() {
  jQuery('.group1').css('transform', 'translateX(-200%)');
  jQuery('.group2').css('transform', 'translateX(0)');
});

https://jsfiddle.net/8r302nqk/2/

您可能还需translateY group2来补偿group1身高

Answer 2

我能够弄清楚这一点。我在同一行上获得.group1和.group2所做的是将它们放在绝对位置而不是相对位置上，我开始使用.group2与transform: translateX(200%);一起使用，就像在MikeM中一样帖子。然后我使用jQuery单击事件更改了transfrom: translateX值，将它们左右滑动。我在原帖中所做的更改如下：

.group1,
.group2 {
  position: absolute;
  left: 0;
  right: 0;
  max-width: 900px;
  margin: 0 auto;
  white-space: nowrap;
  transition: all 2s;
}
.group2 {
  transform: translateX(200%);
}

jQuery('.button1').click(function() {
  jQuery('.group1').css('transform', 'translateX(0)');
  jQuery('.group2').css('transform', 'translateX(200%)');
});

jQuery('.button2').click(function() {
  jQuery('.group1').css('transform', 'translateX(-200%)');
  jQuery('.group2').css('transform', 'translateX(0)');
});

https://jsfiddle.net/at74ert7/6/

从一组图像滑动到另一组图像

2 个答案: