jQueryを使用してスクロールdiv

Question

私は<div>を3 <div>に分けています。これらのdivのうち2つは、前と次のボタンとして取得され、IDはそれぞれprevとnextです。 3 <div>は、ID番号がdiva,divb、およびdivcである。 divbとdivcの幅が0であるため、非表示になり、divaだけが表示されます。 divaを非表示にしたい（幅を0に設定）、をクリックするとdivbが表示され、ボタンを再度クリックすると、divbが表示され、divcが表示されます。 id=prevをクリックすると逆も起こりたい

以下は私が言うことをイメージしたものです。

Hereフィドルです。

Answer 1

私はあなたが必要なものを実装するクラスを使用していました。

var $pages = $('.page'); 
$('#nxt').click(
    function() { 
    var $cur = $('.active');  //get current active 
    var $next = $cur.next();  //get next to cur 

    /* 
    * Add logic inside below if condition for going 
    * back to first div. 
    */ 
    if ($next.length == 0) return; //if nothing in next, return. 

    $cur.removeClass('active'); //remove active class from cur active 
    $next.addClass('active');  //add next as current active 

    //animate everything except .active (which is next) 
    $('.page').not('.active').animate({"width": 0}, "slow"); 

    //animate cur (which was next) 
    $('.active').animate({"width": 200}, "slow"); 
}); 

$('#prev').click(
    function() { 
    var $cur = $('.active'); 
    var $prev = $cur.prev('.page'); 

    if ($prev.length == 0) return; 

    $cur.removeClass('active'); 
    $prev.addClass('active'); 

    $('.page').not('.active').animate({"width": 0}, "slow"); 
    $('.active').animate({"width": 200}, "slow"); 
}); 

Answer 2

チェックこのフィドル：http://jsfiddle.net/3yrsu/1/

は、あなたの現在のスライドを追跡するための現在のカスタム属性が追加されました。また、スライドを簡単に識別できるクラスも追加されました。

HTML：

<div class="scroll"> 
    <div class="buttons"> 
     <a id="prev">prev</a> 
     <a id="middle">test</a> 
     <a id="nxt">next</a> 
    </div> 
    <div id="diva" class="slide" current="1">div AA</div> 
    <div id="divb" class="slide">div BB</div> 
    <div id="divc" class="slide">div CC</div> 
</div> 

JS：

$('#nxt').click(
function() { 

    var current = $('.slide[current="1"]'); 
    var next = current.next('.slide'); 
    var prev = current.prev('.slide'); 
    if(next.length == 0) { 
     next = $('.slide').first().insertAfter(current); 
    } 
    if(prev.length == 0) { 
     prev = $('.slide').last().insertBefore(current); 
    } 

    current.animate({"width": 0}, "slow"); 
    next.animate({"width": 200}, "slow"); 
    prev.animate({"width": 0}, "slow"); 

    $('.slide').removeAttr('current'); 
    next.attr('current', "1"); 

}); 

$('#prev').click(
function() { 

    var current = $('.slide[current="1"]'); 
    var next = current.prev('.slide'); 
    var prev = current.next('.slide'); 

    if(next.length == 0) { 
     next = $('.slide').last().insertBefore(current); 
    } 
    if(prev.length == 0) { 
     prev = $('.slide').first().insertAfter(current); 
    } 

    current.animate({"width": 0}, "slow"); 
    next.animate({"width": 200}, "slow"); 
    prev.animate({"width": 0}, "slow"); 

    $('.slide').removeAttr('current'); 
    next.attr('current', "1"); 

}); 

Answer 3

は、私はあなたのhtmlにクラス "現在" と "ページ" を追加しました：ここDEMO

完全なコードを確認してください。

<div class="scroll"> 
    <div class="buttons"> 
     <a id="prev">prev</a> 
     <a id="middle">test</a> 
     <a id="nxt">next</a> 
    </div> 
    <div id="diva" class="current page">div AA</div> 
    <div id="divb" class="page">div BB</div> 
    <div id="divc" class="page">div CC</div> 
</div> 

あなたのJSコードに：あなたはにあなたのHTMLを変更する必要が

$(document).ready(function() { 
    $('#nxt').click(function() { 
    var $cur = $('.current'); 
    var $next = $cur.next(); 
    if ($next.length == 0) 
     return false; 

    $cur.removeClass('current'); 
    $next.addClass('current'); 

    $('.page').not('.current').animate({"width": 0}, "slow"); 
    $('.current').animate({"width": 200}, "slow"); 
    }); 

    $('#prev').click(function() { 
    var $cur = $('.current'); 
    var $prev = $cur.prev('.page'); 

    if ($prev.length == 0) 
     return false; 

    $cur.removeClass('current'); 
    $prev.addClass('current'); 

    $('.page').not('.current').animate({"width": 0}, "slow"); 
    $('.current').animate({"width": 200}, "slow"); 
    }); 
}); 

作業するデモhttp://jsfiddle.net/FGGBH/

・ホープ、このことができます:)