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

Question

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

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

<div class="work">
<a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
<a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>
<a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
<a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
<a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
<a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
</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.

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

这是我所拥有的jsFiddle的链接

有任何想法吗？

Answer 1

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

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

HTML:

<div class="work">
    <div class="nav">
        <a href="#" class="rightButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/right.png" /></a>
        <a href="#" class="leftButton"><img src="http://www.jamietaylor-webdesign.co.uk/images/home/left.png" /></a>       
    </div>
    <div class="scroller">
        <div class="items">
            <a href="#" class="1"><img class="topLeft" src="http://i.stack.imgur.com/JQFbb.jpg" /></a>
            <a href="#" class="2"><img class="topRight" src="http://i.stack.imgur.com/l5OPs.jpg" /></a>
            <a href="#" class="3"><img class="bottomLeft" src="http://i.stack.imgur.com/okxQz.jpg" /></a>
            <a href="#" class="4"><img class="bottomRight" src="http://i.stack.imgur.com/4uPHw.jpg" /></a>
        </div>
    </div>
</div>

相关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)隐藏溢出,其中包含一个包含所有图像的long div(items).items每次单击下一个/上一个按钮时,div都会生成动画.

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

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