javascript - 如何在到达字母 A 时停止左键？

Question

当字母到达字母 Z 时，右键将变得不可点击，但是当点击左键并到达字母 A 时，按钮仍然可以点击如何在到达时停止左键

var element = $('.tab-container li');
var slider = $('.tab-container');
var sliderWrapper = $('.wrapper');
var totalWidth = sliderWrapper.innerWidth();
var elementWidth = element.outerWidth();
var sliderWidth = 0;
var positionSlideX = slider.position().left;
var newPositionSlideX = 0;

sliderWrapper.append('');

element.each(function(){
  sliderWidth = sliderWidth + $(this).outerWidth() + 1;
});

slider.css({
  'width': sliderWidth
});

$('.next-slide').click(function(){
  if(newPositionSlideX>(totalWidth-sliderWidth)){
    newPositionSlideX = newPositionSlideX - elementWidth;
    slider.css({
      'left' : newPositionSlideX
   }, check());
  };
});

$('.prev-slide').click(function(){
  if(newPositionSlideX>=-sliderWidth){
    newPositionSlideX = newPositionSlideX + elementWidth;
    slider.css({
      'left' : newPositionSlideX
   }, check());
  };
});

function check() {;
  if( sliderWidth >= totalWidth && newPositionSlideX > (totalWidth-sliderWidth)){
     $('.next-slide').css({
      'right' : 0
    });
  } else {
     $('.next-slide').css({
      'right' : -$(this).width()
    });
  };

  if( newPositionSlideX < 0){
     $('.prev-slide').css({
      'left' : 0
    });
  } else {
    $('.prev-slide').css({
      'left' : -$(this).width()
    });
  };
};

$(window).resize(function(){
  totalWidth = sliderWrapper.innerWidth();
  check();
});
check();

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  height:50px;
}

.wrapper .next-slide, .wrapper .prev-slide {
  background: #00ac7f;
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
    color: white;
font-weight: 700; font-size: 15px;  text-align: center;
line-height: 1.9em;
    font-size: 20pt;
    border-radius: 50%;
  cursor: pointer;
  transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -webkit-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -moz-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  z-index: 2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper .next-slide:hover, .wrapper .prev-slide:hover {
  background: #00c491;
}

.wrapper .next-slide {
  right: -50px;
}

.wrapper .prev-slide {
  left: -50px;
}

.wrapper .tab-container {
 margin: 0 !important;
 padding: 0 !important;
 position: absolute;
 top: 0;
 left: 0;
 height: 50px;
 transition: left .3s ease-in-out;
 -webkit-transition: left .3s ease-in-out;
 -moz-transition: left .3s ease-in-out;


}
.wrapper .tab-container li {
    background: orange;
  font: normal 14px 'Arial';
  background: #e5e5e5 !important
  margin: 0 !important;
  padding: 15px 20px;
  list-style: none;
  float: left;
  border: 1px solid #fff;
    border-radius: 50%;
  height:50px;
    color: #00463e;
    width: 50px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper .tab-container li:hover {
  opacity: 0.6;
}

.wrapper .tab-container li a {
  background-image: none !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0!important;
  color: #222;
}

.wrapper .tab-container li a span {
  background-image: none !important;
  background-repeat: 0 !important;
  background-position: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wrapper .tab-container li.here, .wrapper .tab-container li.here a {
  font-weight: normal !important;
  color: #00ac7f !important;
}
.prev-slide,.next-slide{
width:30px;
height:30px;
background:#18f084;
margin-left:40px;
margin-bottom:20px;
padding:10px;
display:inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
    <ul class="tab-container">
      <li>A</li>
      <li>B</li> 
        <li>C</li>      <li>D</li>      <li>E</li>      <li>F</li>      <li>G</li>      <li>H</li>      <li>I</li>      <li>J</li>
      <li>K</li>      <li>L</li>      <li>M</li>      <li>N</li>      <li>O</li>      <li>P</li>     <li>Q</li>      <li>R</li>
      <li>S</li>      <li>T</li>      <li>U</li>      <li>V</li>      <li>W</li>
      <li>X</li>      <li>Y</li>        <li>Z</li>
       </ul>
 </div>
 
 <div><div class="prev-slide"><</div><div class="next-slide">></div></div>

我正在尝试制作一个字母 slider ，但是我遇到了这个问题，当我仍然点击左边的按钮时会继续将字母推到右边我如何才能在我的代码中防止这个问题

Answer 1

为什么不使用递增的计数器，如果计数器小于0就不要向左滑动
就像这个例子

var element = $('.tab-container li');
var slider = $('.tab-container');
var sliderWrapper = $('.wrapper');
var totalWidth = sliderWrapper.innerWidth();
var elementWidth = element.outerWidth();
var sliderWidth = 0;
var positionSlideX = slider.position().left;
var newPositionSlideX = 0;

var counter = 0;

sliderWrapper.append('');

element.each(function(){
  sliderWidth = sliderWidth + $(this).outerWidth() + 1;
});

slider.css({
  'width': sliderWidth
});

$('.next-slide').click(function(){
  if(newPositionSlideX>(totalWidth-sliderWidth)){
    newPositionSlideX = newPositionSlideX - elementWidth;
    counter++;
    slider.css({
      'left' : newPositionSlideX
   }, check());
  };
});

$('.prev-slide').click(function(){
  if(newPositionSlideX>=-sliderWidth && counter > 0){
    newPositionSlideX = newPositionSlideX + elementWidth;
    counter--;
    slider.css({
      'left' : newPositionSlideX
   }, check());
  };
});

function check() {;
  if( sliderWidth >= totalWidth && newPositionSlideX > (totalWidth-sliderWidth)){
     $('.next-slide').css({
      'right' : 0
    });
  } else {
     $('.next-slide').css({
      'right' : -$(this).width()
    });
  };

  if( newPositionSlideX < 0){
     $('.prev-slide').css({
      'left' : 0
    });
  } else {
    $('.prev-slide').css({
      'left' : -$(this).width()
    });
  };
};

$(window).resize(function(){
  totalWidth = sliderWrapper.innerWidth();
  check();
});
check();

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  height:50px;
}

.wrapper .next-slide, .wrapper .prev-slide {
  background: #00ac7f;
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
    color: white;
font-weight: 700; font-size: 15px;  text-align: center;
line-height: 1.9em;
    font-size: 20pt;
    border-radius: 50%;
  cursor: pointer;
  transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -webkit-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  -moz-transition: background .3s ease-in-out, left .3s ease-in-out, right .3s ease-in-out;
  z-index: 2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper .next-slide:hover, .wrapper .prev-slide:hover {
  background: #00c491;
}

.wrapper .next-slide {
  right: -50px;
}

.wrapper .prev-slide {
  left: -50px;
}

.wrapper .tab-container {
 margin: 0 !important;
 padding: 0 !important;
 position: absolute;
 top: 0;
 left: 0;
 height: 50px;
 transition: left .3s ease-in-out;
 -webkit-transition: left .3s ease-in-out;
 -moz-transition: left .3s ease-in-out;


}
.wrapper .tab-container li {
    background: orange;
  font: normal 14px 'Arial';
  background: #e5e5e5 !important
  margin: 0 !important;
  padding: 15px 20px;
  list-style: none;
  float: left;
  border: 1px solid #fff;
    border-radius: 50%;
  height:50px;
    color: #00463e;
    width: 50px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  z-index: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper .tab-container li:hover {
  opacity: 0.6;
}

.wrapper .tab-container li a {
  background-image: none !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0!important;
  color: #222;
}

.wrapper .tab-container li a span {
  background-image: none !important;
  background-repeat: 0 !important;
  background-position: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wrapper .tab-container li.here, .wrapper .tab-container li.here a {
  font-weight: normal !important;
  color: #00ac7f !important;
}
.prev-slide,.next-slide{
width:30px;
height:30px;
background:#18f084;
margin-left:40px;
margin-bottom:20px;
padding:10px;
display:inline-block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
    <ul class="tab-container">
      <li>A</li>
      <li>B</li> 
        <li>C</li>      <li>D</li>      <li>E</li>      <li>F</li>      <li>G</li>      <li>H</li>      <li>I</li>      <li>J</li>
      <li>K</li>      <li>L</li>      <li>M</li>      <li>N</li>      <li>O</li>      <li>P</li>     <li>Q</li>      <li>R</li>
      <li>S</li>      <li>T</li>      <li>U</li>      <li>V</li>      <li>W</li>
      <li>X</li>      <li>Y</li>        <li>Z</li>
       </ul>
 </div>
 
 <div><div class="prev-slide"><</div><div class="next-slide">></div></div>