如何使用Jquery滑动元素

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

我看到了一些例子,但是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; } 
  
1
2
3
4
5

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

 $("#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由于某种原因今天不喜欢这个代码

在Javascript中试用此代码

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

希望这可以帮到你。