如何在滑块末尾im时禁用单击按钮

Question

这是我的代码，如果 im 在滑块的末尾，那么右键应该自动禁用，当 im 在初始阶段意味着，如果 im 在"area1"上，那么左箭头将不起作用，如果我在"区域 8"上，那么右箭头应该不起作用

$('.rightArrow').click(function(event) {
$('.box').animate({'left' : "-=200px"});
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : "+=200px"});
});

.mainRow::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
}
.mainRow {
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: red;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
}
.leftArrow {
position: absolute;
left: -50px;
top: 20px;
font-size: 40px;
}
.rightArrow {
position: absolute;
right: -50px;
top: 20px;
font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>

Answer 1

固定

如果您打算更改正在使用的幻灯片数量，可能不是最佳解决方案(但在这种情况下，您必须计算最大可能left来检查您是否要走得更远(。

在更改位置之前添加position().left检查：

var truePosition = $('.box').position().left;
$('.rightArrow').click(function(event) {
if(truePosition > -1415){
truePosition -= 205;
$('.box').animate({'left' : "-=205px"});
}
});
$('.leftArrow').click(function() {
if(truePosition < 20){
truePosition += 205;
$('.box').animate({'left' : "+=205px"});
}
});

检查JSFIDDLE上的工作示例

Answer 2

在这里，您再提供一种解决方案 https://jsfiddle.net/znkne887/2/

var boxWidth = $('.box:first-child').width() + 5;
var cnt = 0;
$('.rightArrow').click(function(event) {
$('.box').animate({'left' : `-=${boxWidth}px`});
cnt++;
if(cnt === $('.mainRow').children().length - 1 ){
	$(this).hide();
}else{
	$(this).show();
}
$('.leftArrow').show();
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : `+=${boxWidth}px`});
cnt--;
if(cnt === 0){
	$(this).hide();
}else{
	$(this).show();
}
$('.rightArrow').show();
});

.mainRow::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
width: 200px;
margin: 0 auto;
}
.mainRow {
width: 200px;
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: red;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
text-align:center;
color: #fff;
font-weight: 700;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
z-index:9;
}
.leftArrow {
position: absolute;
left: -35px;
top: 20px;
font-size: 40px;
display:none;
}
.rightArrow {
position: absolute;
right: -35px;
top: 20px;
font-size: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">

<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
</div>    

<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>

Answer 3

这是任何数量的幻灯片的工作小提琴。单击向右箭头直到最后，看看会发生什么。

注意：该按钮仅在最后一张幻灯片完全可见时隐藏，因此您可能需要修改滑块才能始终移动整张幻灯片。

编辑：现在应该适用于左按钮。

$('.rightArrow').click(function(event) {
	$('.box').animate({'left' : "-=200px"});
	if( $('.box').last().isFullyVisible() ){
$(this).hide();
	}
$('.leftArrow').show();
});
$('.leftArrow').click(function() {
$('.box').animate({'left' : "+=200px"});
if( $('.box').first().isFullyVisible() ){
$(this).hide();
}
$('.rightArrow').show();
});
$(function(){
if( $('.box').first().isFullyVisible() ){
$('.leftArrow').hide();
}
});
jQuery.fn.isFullyVisible = function(){
	var win = $(window);
	var viewport = {
	top : win.scrollTop(),
	left : win.scrollLeft()
	};
	viewport.right = viewport.left + win.width();
	viewport.bottom = viewport.top + win.height();
	var elemtHeight = this.height();
	elemtHeight = Math.round(elemtHeight);
	var bounds = this.offset();
	bounds.top = bounds.top + elemtHeight;
	bounds.right = bounds.left + this.outerWidth();
	bounds.bottom = bounds.top + this.outerHeight();
	return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
}

body{
margin:0;
padding:0;
}
.mainRow::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
height: 0px;
}
.mainRow::-webkit-scrollbar-thumb {
width: 0px;
height: 0px;
}
.wrapper {
position: relative;
}
.mainRow {
overflow-x: scroll !important;
border-collapse:separate;
border-spacing:5px 0px;
}
.box {
background: #ddd;
height: 100px;
min-width: 200px;
max-width: 200px;
display: table-cell;
animation: slideBox .5s;
animation-fill-mode: forwards;
position: relative;
}
.arrows {
position: absolute;
width: 100%;
top: 0;
}
.leftArrow {
position: absolute;
left: 0px;
top: 20px;
font-size: 40px;
}
.rightArrow {
position: absolute;
right: 0px;
top: 20px;
font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container wrapper">
<div class="mainRow">
<div class="box">area 1</div>
<div class="box">area 2</div>
<div class="box">area 3</div>
<div class="box">area 4</div>
<div class="box">area 5</div>
<div class="box">area 6</div>
<div class="box">area 7</div>
<div class="box">area 8</div>
</div>
<div class="arrows">
<button type="button" class="leftArrow" id="noclick"> <i class="fa fa-angle-left"></i> </button>
<button type="button" class="rightArrow"> <i class="fa fa-angle-right"></i> </button>
</div>
</div>