如何解决如果滑动分别在开头或结尾,如何隐藏箭头
我有一个带有左右箭头的水平滑动列表,可以移动,而且我可以向右滑动。 现在,当我单击右箭头并到达末尾时,右箭头被隐藏,反之亦然。 但是当我向右或向左滑动并到达终点/起点时,箭头不会隐藏。 如果我通过滑动到达终点,如何隐藏右箭头?
我的 HTML 代码:
<div id="imageSlider1" class="catalog-slider">
<div class="catalog-cover">
<i class="iccircle-left move-left left-button"></i>
<ul class="sliderWrapper1 catalog-list corporate-projects">
<a class="slide" href="#A">
<li class="catalog-item"><img src="#imgA" alt="{{ $tags[$i] }}">List A</li>
</a>
<a class="slide" href="#B">
<li class="catalog-item"><img src="#imgB" alt="{{ $tags[$i] }}">List B</li>
</a>
<a class="slide" href="#C">
<li class="catalog-item"><img src="#imgC" alt="{{ $tags[$i] }}">List C</li>
</a>
<a class="slide" href="#D">
<li class="catalog-item"><img src="#imgD" alt="{{ $tags[$i] }}">List D</li>
</a>
<a class="slide" href="#E">
<li class="catalog-item"><img src="#imgE" alt="{{ $tags[$i] }}">List E</li>
</a>
</ul>
<i class="iccircle-right right-button move-right"></i>
</div>
</div>
我的 Javascript 代码:
if($(".sliderWrapper1").prop('scrollWidth') > $(".catalog-cover").width())
{
$('.left-button,.right-button').show();
}
else
{
$('.left-button,.right-button').hide();
};
const slider = document.querySelector(".catalog-list");
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
let isDown = false;
let isDragged = false;
let startX;
let scrollLeft;
if(slider){
slider.addEventListener("mousedown",e => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave",() => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup",(e) => {
isDown = false;
const elements = document.querySelectorAll("a");
if(isDragged) {
for(let i = 0; i < elements.length; i++) {
elements[i].addEventListener("click",preventClick);
}
} else {
for(let i = 0; i < elements.length; i++) {
elements[i].removeEventListener("click",preventClick);
}
}
slider.classList.remove("active");
isDragged = false;
});
slider.addEventListener("mousemove",e => {
if(!isDown) return;
isDragged = true;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
}
var widthc = $(".catalog-cover").width();
$('.left-button').hide();
$('.left-button').click(function() {
$('.right-button').show();
$(".sliderWrapper1").animate({
scrollLeft: "-="+widthc+"px"
},"normal",function() {
if($('.sliderWrapper1').scrollLeft() <= 0) {
$('.left-button').hide();
}
});
});
$('.right-button').click(function() {
$('.left-button').show();
$(".sliderWrapper1").animate({
scrollLeft: "+="+widthc+"px"
},function() {
if($('.sliderWrapper1')[0].scrollWidth - $('.sliderWrapper1').scrollLeft() == $('.sliderWrapper1').width()) {
$(".right-button").hide();
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。