如何使用下一个和上一个按钮添加/删除类答案

【问题标题】：How to Add / remove classes with next and prev button如何使用下一个和上一个按钮添加/删除类
【发布时间】：2018-07-22 14:52:50
【问题描述】：

我有一个网页，其中 div 在向下滚动页面时从左侧滑入。所以 fx 当你向下滚动到 500px 时，一个类被添加到第一个 div 使其滑入，当你向下滚动到 1500px 时，一个类被添加到下一个 div 等等。当向上滚动时，类被移除，使得 div 一个一个地向左滑出。

我想要这个效果，但是我想要一个“下一个”和“上一个”按钮，而不是使用滚动功能；因此，当单击下一步时，第一个 div 滑入，再次单击下一个时，第二个 div 滑入，依此类推。有人知道怎么做吗？

这是我现在使用的滚动功能如何工作的示例：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 500) {
    $('.box_1').addClass('show');
  } else {
    $('.box_1').removeClass('show');
  }
    if (y > 1500) {
    $('.box_2').addClass('show');
  } else {
    $('.box_2').removeClass('show');
  }
      if (y > 2500) {
    $('.box_3').addClass('show');
  } else {
    $('.box_3').removeClass('show');
  }
});

body {height: 4000px;}

.box_1 {
  height: 200px;
background:red;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_1.show {
    transform: translateX(0);
}

.box_2 {height: 50px;
background:yellow;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_2.show {
    transform: translateX(0);
}
.box_3 {height: 100px;
background:green;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_3.show {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="box_1" style="display: inline-block; overflow: hidden;"><span>red box</span></li>

<li class="box_2" style="display: inline-block; overflow: hidden;"><span>yellow box</span></li>

<li class="box_3" style="display: inline-block; overflow: hidden;"><span>green box</span></li>

【问题讨论】：

确定这正是您已经完成的？添加和删除类，但不是检查“y”位置，而是添加一个事件侦听器，用于单击“下一步”按钮并在其中放置您想要的代码

标签： jquery slide

【解决方案1】：

只是移动可以看到幻灯片的窗口。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 500) {
    $('.box_1').addClass('show');
  } else {
    $('.box_1').removeClass('show');
  }
    if (y > 1500) {
    $('.box_2').addClass('show');
  } else {
    $('.box_2').removeClass('show');
  }
      if (y > 2500) {
    $('.box_3').addClass('show');
  } else {
    $('.box_3').removeClass('show');
  }
});
$(".next").click(function(){
  var y=$(window).scrollTop();
  if(y < 500)
    $(window).scrollTop(y+501);
  if(y < 1500 && y > 500)
    $(window).scrollTop(1501);
  if(y < 2500 && y > 1500)
    $(window).scrollTop(2501);
    

});
$(".pre").click(function(){
  var y=$(window).scrollTop();
  if(y > 500&& y<1500)
    $(window).scrollTop(0);
  if(y > 1500 && y < 2500)
    $(window).scrollTop(501);
  if(y > 2500 )
    $(window).scrollTop(1501);
    

});

body {height: 4000px;}

.box_1 {
  height: 200px;
background:red;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_1.show {
    transform: translateX(0);
}
input{
position:fixed;
float:right;
color:red;
}

.box_2 {height: 50px;
background:yellow;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_2.show {
    transform: translateX(0);
}
.box_3 {height: 100px;
background:green;
padding-top: 30px;
display:none;
position: fixed;
transform: translateX(-150%);
transition: transform 1s ease;
}

.box_3.show {
    transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="box_1" style="display: inline-block; overflow: hidden;"><span>red box</span></li>

<li class="box_2" style="display: inline-block; overflow: hidden;"><span>yellow box</span></li>

<li class="box_3" style="display: inline-block; overflow: hidden;"><span>green box</span></li>
<input class=pre value=previous type=button><br>
<input class=next value=next type=button>

【讨论】：