4

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へのリンクがあります

何か案は？

4

2 に答える 2

7

画像をスクロールして表示するように編集:

これにはマークアップを変更する必要がありますが、画像を左右にスクロールできるようになります。

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非常に長いdiv( ) を含む非表示のオーバーフローを持つ固定ビューポート ( ) があるということです。itemsdiv は、items次/前のボタンをクリックするたびにアニメーション化されます。

トリッキーな部分は、画像の行の終わりに到達したときに、最後の要素を前面に移動することです。これはハードコードされた値によって決定されますが、正確な計算を使用して改善できる可能性があります。

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

于 2011-02-19T21:13:36.167 に答える
2

CSS から (img タグで) 「display:none」を削除すると、マークアップで機能し、左右のボタンで画像を回転させるコードは次のようになります。 

<script type="text/javascript">
<!--
    $(function() {
        $("div.work >a:gt(2)").hide();

        $(".rightButton").click(function () {

            if ($("div.work >a:last").is(":visible"))
            {
                $("div.work >a:gt(1)").hide();
                $("div.work >a:eq(2)").show();
            } else {
                $("div.work >a:visible:gt(1)").hide().next().show();
            }
        });

        $(".leftButton").click(function () {

            if ($("div.work >a:eq(2)").is(":visible"))
            {
                $("div.work >a:gt(1)").hide();
                $("div.work >a:last").show();
            } else {
                $("div.work >a:visible:gt(1)").hide().prev().show();
            }
        });

    });



//-->
</script>
于 2011-02-19T22:59:50.000 に答える