Javascript 使用jQuery滚动div

我有一个

，分为3个

s。其中两个div被用作上一个和下一个按钮，分别具有id

prev

和

next

。3具有ID的

diva

、

divb

和

divc

的

s排列在底部
divb
和
divc
的宽度为0，因此它们是隐藏的，并且只有
diva
可见。我想隐藏
diva
以隐藏（将宽度设置为0）和
divb
以在用户单击
id=next
时显示，如果再次单击按钮，我想
divb
以隐藏并显示
divc
。另外，如果单击了
id=prev
，我希望这种情况发生相反的情况

下面是我想说的一个图像


是小提琴。
检查这把小提琴：

添加了自定义属性“current”以跟踪当前幻灯片。还添加了一个类来轻松识别幻灯片

HTML:

我使用类来实现您所需要的。检查这里

完整代码：

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");
});

我在html中添加了类“current”和“page”。您需要将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>

工作演示

希望这有帮助：）
Hi@techfoobar，你能再帮我一个忙吗？？我想要
中的文本。。你能帮帮我吗…谁再帮我一个忙？？我希望content1中的文本分别更改为content2和content3。。jsfiddle.net/blasteralfred/3yrsu/2。。谁来帮帮我。。
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");
});

<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>

$(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");
  });
 });