Question

我有一个<div>，分为3个<div>个。其中两个div被视为上一个和下一个按钮，分别具有id prev和next。 3 <div>个diva，divb和divc排列在底部。 divb和divc的宽度为0，因此它们是隐藏的，只有diva可见。我想隐藏diva隐藏（将宽度设置为0）和divb，以便在用户点击id=next时显示，如果再次点击该按钮，我希望divb隐藏和divc出现。此外，如果点击id=prev，我希望这种情况发生逆转。

以下是我想说的内容的图片;

enter image description here

Here 是小提琴。

Answer 1

检查这个小提琴：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 2

我用了课来实现你需要的东西。在这里查看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 3

我在你的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>

您的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/

希望这会有所帮助：）

使用jQuery滚动div

3 个答案: