首页 文章

如何使用next和prev按钮添加/删除类

提问于
浏览 次
1

我有一个网页，当向下滚动页面时，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>
jquery slide

1 回答

  • 0

    只需移动可见幻灯片的窗口 .

    $(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>
    回复于

相关问题