1

我希望能够在第一个框中隐藏/禁用上一个链接并在最后一个框中禁用下一个链接，因为此时您可以继续单击最后一个框的下一个，当您这样做时它会中断为单击上一个不再起作用。在小提琴中查看演示

<span id="wrapper">
<span id="prev"><a href="#">Go to Prev</a></span>
<span id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div id="start" class="box">6</div>
    <div class="box">7</div>
</span>
<span id="next"><a href="#">Go to Next</a></span>


    var $curr = $("#start");
$curr.css("display", "inline");
$("#prev a").click(function () {
  $curr = $curr.prev();
  $(".box").css("display", "");
  $curr.css("display", "inline");
});

$("#next a").click(function () {
  $curr = $curr.next();
  $(".box").css("display", "");
  $curr.css("display", "inline");
});
4

2 回答 2

2

编辑以尊重您的项目需求：

jsFiddle 演示（隐藏按钮）

var currN = 5;
var boxN = $('#content .box').length;
$('#content .box').eq(currN).show();

function displayBox(){
    pr= currN === 0      ? $('#prev').hide() : $('#prev').show() ;
    nx= currN === boxN-1 ? $('#next').hide() : $('#next').show() ;
    $('.box').eq(currN).show().siblings().hide();
}

$("#prev, #next").click(function () {
    var whichBtn = this.id==='next' ? currN++ : currN--;
    displayBox();
});

你不需要禁用你的按钮，做一个循环！

jsFiddle 演示

var $curr = $("#start");
var currN = $curr.index();
var boxN = $('#content .box').length;

$curr.css("display", "inline");

function displayBox(){
    if(currN === -1){
        currN = boxN-1;
    }else{
       currN = currN % boxN;
    }
    $('.box').eq(currN).show().siblings().hide();
}


$("#prev a").click(function () {
    currN--;
    displayBox();
});

$("#next a").click(function () {
    currN++;
    displayBox();
});

我在这里创建了一个简化版本（你不需要#start）：

jsFiddle 演示 2（简化）

这就是你所需要的：

var currN = 5;   // set here start slide! (zero index based)
var boxN = $('#content .box').length;
$('#content .box').eq(currN).show();

function displayBox(){
    var curBox = currN === -1 ? currN=boxN-1 : currN=currN%boxN;
    $('.box').eq(currN).show().siblings().hide();
}

$("#prev, #next").click(function () {
    var whichBtn = this.id==='next' ? currN++ : currN--
    displayBox();
});
于 2012-07-19T21:58:16.447 回答
1

我会这样做：

http://jsfiddle.net/mBXYL/

var $curr = $("#start");
$curr.css("display", "inline");
$("#prev a").click(function() {
    $curr = $curr.prev();
    $(".box").css("display", "");
    $curr.css("display", "inline");
    $("#next").show();
    if (!$curr.prev().length) {
        $("#prev").hide();
    }
});

$("#next a").click(function() {
    $curr = $curr.next();
    $(".box").css("display", "");
    $curr.css("display", "inline");
    $("#prev").show();
    if (!$curr.next().length) {
        $("#next").hide();
    }
});​
于 2012-07-19T21:55:53.240 回答