Question

我有一个功能向下箭头来浏览相册。如何配置向上箭头以沿相反方向（向上）导航？

我已经编写了JQuery来添加垂直滚动功能，该功能在页面的每个视图（部分）仅显示一张照片。选择向下箭头时，将弹出照片库中的下一张图像。不幸的是，我似乎无法配置向上箭头。关于如何执行此操作的任何想法？

我已经尝试使用相反的运算符（-而不是+）进行配置以导航我的href（请参见下文），但无法按预期进行：

$(document).ready(function() {
  var currNum = 0;

  $('.down').click(function() {
    currNum += 1;
    var nextNum = currNum + 1;
    var nextLink = '#0' + nextNum.toString();
    $(this).attr('href', nextLink);

    $('.up').click(function() {
      var prevNum = currNum - 1;
      var prevLink = '#0' + prevNum.toString();
      $(this).attr('href', prevLink);
    });
  });
});

$(document).ready(function() {
  var currNum = 0;

  $('.down').click(function() {
    currNum += 1;
    var nextNum = currNum + 1;
    var nextLink = '#0' + nextNum.toString();
    $(this).attr('href', nextLink);
  });
});

<!--Container-->
<div id="container">

  <div id="cow"><img src="./img/cow.png" alt="icon!"></div>

  <div id="arrows">
    <a id="01" class="up" href="#01"><i class="down_icon"></i></a>
    <a id="01" class="down" href="#01"><i class="down_icon"></i></a>
  </div>

  <!--Images-->
  <div id="01" class="section"><img src="photo01.jpg" alt=""></div>
  <div id="02" class="section"><img src="photo02.jpg" alt=""></div>
  <div id="03" class="section"><img src="photo03.jpg" alt=""></div>

</div>

Answer 1

通过使用ID，您只能限制自己在同一页面上使用多个画廊。 改为使用班级。
为您的商品创建一个名为.Gallery-slider的包装器（将作为过渡元素）
在CSS中使用transform和transition进行动画制作！
使用c变量作为计数器，根据单击的按钮递增/递减
并使用此微小代码修复计数器（索引器）循环：c = c<0 ? tot-1 : c%tot;（其中tot是项目总数）
通过-c * 100%将滑块DIV转换为Y

jQuery($ => { // DOM ready and $ alias in scope

  /**
   * Gallery component
   */

  $('.Gallery').each((i, el) => {
    
    let c = 0; // Start index Counter
    const $Slider = $(el).find('.Gallery-slider');
    const $UpDown = $(el).find('.up, .down');
    const tot = $Slider.children().length;    
    const animate = () => {
      c = c<0 ? tot-1 : c%tot; 
      $Slider.css({transform: `translateY(${-c * 100}%)`});
    };
    
    $UpDown.on('click', evt => {
      evt.preventDefault();
      c = $(evt.currentTarget).is('.down') ? ++c : --c;
      animate();
    });
    
  });
  
});

* {box-sizing:border-box; margin:0;}

/**
 * Gallery component
 */
 
.Gallery {
  position: relative;
  overflow: hidden;
  height: 50vh;
}

.Gallery-slider {
  position: relative;
  height: inherit;
  transition: 0.4s;
}

.Gallery-item {
  height: 100%;
}

.Gallery-item img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.Gallery-arrows {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
}

.Gallery-arrows a {
  position: absolute;
  transform: translateX(-50%);
  font-size: 3em;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.Gallery-arrows a.down {
 bottom: 0;
}

<div class="Gallery">
  <div class="Gallery-slider">
    <div class="Gallery-item"><img src="//placehold.it/600x400/0bf?text=1" alt="1"></div>
    <div class="Gallery-item"><img src="//placehold.it/600x400/f0b?text=2" alt="2"></div>
    <div class="Gallery-item"><img src="//placehold.it/600x400/b0f?text=3" alt="3"></div>
  </div>
  <div class="Gallery-arrows">
    <a class="up"><i class="down_icon">&uarr;</i></a>
    <a class="down"><i class="up_icon">&darr;</i></a>
  </div>
</div>

<div class="Gallery">
  <div class="Gallery-slider">
    <div class="Gallery-item"><img src="//placehold.it/600x400/ff0?text=As+many" alt="1"></div>
    <div class="Gallery-item"><img src="//placehold.it/600x400/00f?text=galleries+as" alt="2"></div>
    <div class="Gallery-item"><img src="//placehold.it/600x400/f00?text=you+need" alt="3"></div>
  </div>
  <div class="Gallery-arrows">
    <a class="up"><i class="down_icon">&uarr;</i></a>
    <a class="down"><i class="up_icon">&darr;</i></a>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

向相反方向动画自定义幻灯片

1 个答案: