Question

我在点击按钮时制作幻灯片就像表单一样有问题。

我看到了一些例子，但是tehy非常复杂。我试着用这个。

$("#btn").click(function() {
$('.box.box1').hide('slide', {direction: 'left'}, 1000);});

以下是我的jsfiddle：https://jsfiddle.net/d6x66kb2/3/，因为下面的代码在代码段中不起作用

单击下一个幻灯片按钮时，＃1框将向左滑动并消失。它应该是＃2，＃3，＃4和＃5盒子。所以，所以堡垒。

如何将box1代码应用于其余框。

$("#btn").click(function() {
  $('.box.box1').hide('slide', {
    direction: 'left'
  }, 1000);
});

#test {
  width: 100px;
  min-height: 100px;
}
.container {
  width: 250px;
  height: 250px;
  border: 1px dotted red;
}
.inner-container {
  width: 1250px;
}
.inner-container:after {
  display: block;
  clear: both;
  content: "";
}
.box {
  float: left;
  background: green;
  width: 250px;
  height: 250px;
  opacity: 0.4;
  padding: 104px;
  font-size: 36px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
button {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="inner-container">
    <div class="box box1">
      1
    </div>
    <div class="box box2">
      2
    </div>
    <div class="box box3">
      3
    </div>
    <div class="box box4">
      4
    </div>
    <div class="box box5">
      5
    </div>
  </div>
</div>


<button id="btn">Next Slide</button>

Answer 1

在Javascript中试用此代码

var count = 1;
$("#btn").click(function() {
    $('.box'+count).hide('slide', {direction: 'left'}, 1000);
    count +=1;
});

希望这可以帮到你。

Answer 2

这是一个更简单的版本。每次单击隐藏第一个可见框，并在单击其他按钮时显示最后一个不可见

$("#next").click(function() {
  $(".box:visible").eq(0).hide('slide', {
    direction: 'left'
  }, 1000);
});

$("#previous").click(function() {
  $(".box").not(":visible").last().show('slide', {
    direction: 'left'
  }, 1000);
});

FIDDLE因为stacksnippets由于某种原因今天不喜欢这段代码

如何使用Jquery滑动元素

2 个答案: