带有按钮的 Javascript 滚动；可以根据需要重复多次

Question

我有一些电影想在我的网站上显示在一个水平的、可滚动的 div 中。因为我删除了滚动条，用户不能再滚动了，这就是我添加两个按钮的原因。一键向右移动，一键向左移动。

问题是，按钮可以按需要按的次数不限。所以电影不会再显示了，因为通过 Javascript 添加了边距。

我该如何解决这个问题？我想在开始时禁用左键，在结束时禁用右键。

$('#right-button').click(function() {
		event.preventDefault();
		$('.movie-scroll').animate({
				marginLeft: "-=200px"
		}, "fast");
});
$('#left-button').click(function() {
		event.preventDefault();
		$('.movie-scroll').animate({
				marginLeft: "+=200px"
		 }, "fast");
});

::-webkit-scrollbar {
	display: none;
}

.sc_content {
	overflow-y: scroll;
}

.title_home {
	font-size: 18px;
	margin: 30px 0px -10px 30px;
}

.movie-scroll {
	height: 300px;
	white-space: nowrap; 
	overflow-x: scroll;
	margin-right: 30px;
}

.thumbnail-movie-box {
	width: 130px;
	margin: 30px 0px 0px 30px;
	display: inline-block;
}

.thumbnail-movie-content {
	display: block;
 	position: relative;
}

.thumbnail-movie-poster {
	width: 130px;
	height: 195px;
}

.thumbnail-movie-title {
    font-size: 12px;
    font-weight: bold;
	margin: 5px 0px 10px 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.thumbnail-movie-year {
	font-size: 12px;
	margin: -5px 10px 10px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<div class="sc_content">
  <h1 class="title_home">Movies</h1>
  <a href="#" id="left-button">Left</a>
  <div class="movie-scroll">
    <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
</div>
<a href="#" id="right-button">Right</a>

Answer 1

fiddle :https://jsfiddle.net/zbavtpj4/

将您的 javascript 更改为以下内容:

var index = 0;

$('#right-button').click(function() {
        event.preventDefault();
    if(index <= 7){
      $('.movie-scroll').animate({
          marginLeft: "-=200px"
      }, "fast");
      index++;
    }
});
$('#left-button').click(function() {
        event.preventDefault();
    if(index >= -2){
      $('.movie-scroll').animate({
          marginLeft: "+=200px"
       }, "fast");
       index--;
     }
});

使用索引跟踪位置，如果索引不在范围内则不更改边距。在此示例中，边界是手动定义的。可以通过编程方式定义边界，但我没有时间这样做。