对相反方向的自定义幻灯片进行动画处理

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是项目总数(
• 将 Y 滑块 DIV 平移-c * 100%

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>