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

时间：2018-08-07 10:41:20

标签： javascript jquery html css

当字母到达字母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>

我正尝试制作字母滑块，但是当我仍然单击左侧按钮时，我会遇到该问题，它将继续将字母推到右侧，如何防止我的代码出现此问题

2 个答案:

答案 0 :(得分：2)

为什么不使用递增的计数器，如果计数器小于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>

答案 1 :(得分：1)

在jsfiddle中调试代码后，您可以解决以下问题：

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

https://jsfiddle.net/Lhcr2uj1/4/

相关问题
最新问题