Question

例如，我有10个<div>，我想在下一个按钮点击＆amp;上显示每个<div>在上一次按钮点击时显示上一个<div>。如何使用jQuery做到这一点？

Answer 1

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

这是一个非常简单的HTML示例。

使用像这样的简单jQuery代码：

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

有关进一步说明：第一个块将隐藏除第一个之外的每个div（e是jQuery的每个函数中的计数器）。

另外两个块处理按钮上的单击。我们正在寻找可见的div，然后点击我们接下来显示（参见jquery的next（）函数或前面的div（jquery的prev（）函数）。

如果没有下一个div（在下一个按钮点击），我们隐藏了可见的div并显示了第一个。

此处的在线示例：http://jsfiddle.net/hsJbu/

Answer 2

你可以这样做：

HTML：

<div class="mydivs">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>

JS：

$(document).ready(function() {
    var divs = $('.mydivs>div');
    var now = 0; // currently shown div
    divs.hide().first().show(); // hide all divs except first
    $("button[name=next]").click(function() {
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).show(); // show next
    });
    $("button[name=prev]").click(function() {
        divs.eq(now).hide();
        now = (now > 0) ? now - 1 : divs.length - 1;
        divs.eq(now).show(); // show previous
    });
});

jsfiddle

Answer 3

听起来像你想要的旋转木马

以下是一些示例：http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

你可以让一个下一个和上一个按钮在div中滑动，旧的滑出（或任何其他效果）

旋转木马不依赖于图像，它可以是Divs内容。

祝你好运＆amp;祝你有愉快的一天

编辑：Bootstraps拥有轮播：http://twitter.github.io/bootstrap/javascript.html#carousel

Answer 4

如果你想自己做，请尝试以下方法。将所有div设置为display：none，除了first之外。也可以在下面的代码中根据您拥有的div数更改maxdiv值（如果数字可以更改，则在jquery中找到它）。

$(document).ready(function(){
var tracker = 1;
var maxdivs = 4;

$("#next").click(function(){
var divclass = ".cls" + tracker;
$(divclass).css("display","none");
tracker = tracker + 1;
if(tracker > maxdivs)
  tracker = 1;
divclass = ".cls" + tracker;
$(divclass).css("display","block");
});

$("#prev").click(function(){
 var divclass = ".cls" + tracker;
  $(divclass).css("display","none");
    tracker = tracker - 1;
  if(tracker < 1)
    tracker = maxdivs;
  divclass = ".cls" + tracker;
  $(divclass).css("display","block");
 });
 });

使用jQuery使用Next Previous按钮显示隐藏div？

4 个答案: