jQuery动画到div中的下一个图像

我在div有一些图像，当我点击下一个按钮动画到div中的下一个按钮时我正在尝试

在这个div我也有我的上一个和下一个按钮，我显然不想动画。

我的jQuery实际上没有用

  // prevent click jump $('a').click(function() { return false; }); // do work $('.work > .leftButton').click(function() { //animate to previous image in the list $(this).siblings().prev().show(); }); $('.work > .rightButton').click(function() { //animate to next image in the list $(this).siblings().next().show(); }); 

有没有办法动画下一个没有leftButton或rightButton类的rightButton 。

还有一种方法，如果我在第一个图像上它将转到div中的最后一个图像？

这是我所拥有的jsFiddle的链接

有任何想法吗？

Answer 1

编辑将图像滚动到视图中：

这需要对标记进行一些更改，但允许图像向左/向右滚动：

HTML：

相关CSS：

 div.work { background-color: #ddd; height:240px; position: relative; width:300px; margin-left:10px} div.items { position:relative; width: 1000em; height: 240px; } div.scroller { overflow: hidden; width: 300px; height: 100%; } 

JavaScript的：

 $('.work .leftButton').click(function() { var $items = $(".items"); if ($items.position().left === 0) { $items.css("left", "-300px"); $items.children("a:last").prependTo($items); } $(".items").animate({ left: "+=300px" }); }); $('.work .rightButton').click(function() { var $items = $(".items"); if ($items.position().left === -900) { $items.css("left", "-600px"); $items.children("a:first").appendTo($items); } $(".items").animate({ left: "-=300px" }); }); 

基本上正在发生的是有一个固定的视口（ scroller ），隐藏的溢出包含一个包含所有图像的非常长的div （ items ）。 每次单击下一个/上一个按钮时， items div都会生成动画。

当到达图像行的末尾时，棘手的部分是将最后一个元素移动到前面，反之亦然。 这由硬编码值确定，但可以使用精确计算来改进。

工作示例： http ： //jsfiddle.net/andrewwhitaker/6TLK2/3/

Answer 2

如果你从CSS中删除’display：none’（在img标签上），这里的代码适用于你的标记并在左右按钮上旋转图像：