滚动使用jQuery

Question

div的我有一个<div>，分为3 <div>秒。其中两个div分别作为上一个按钮和下一个按钮，其ID分别为prev和next。具有ID diva,divb和divc的3 <div>被布置在底部。 divb和divc的宽度为0，因此它们被隐藏，只有diva可见。我想隐藏diva隐藏（设置宽度为0）和divb出现时，用户点击id=next如果按钮被再次点击，我想divb隐藏和divc出现。另外，如果单击id=prev，我希望这会发生逆转。

下面是什么，我想说的图像;

Here是小提琴。

Answer 1

我用类来实现你所需要的。检查DEMO这里

全码：

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。您需要将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="current page">div AA</div> 
    <div id="divb" class="page">div BB</div> 
    <div id="divc" class="page">div CC</div> 
</div> 

你的js代码：

$(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/

希望这有助于:)