Question

大家好，我需要帮助扩展多幻灯片JS轮播的功能。

用户点击下一步按钮，然后项目＃1被隐藏，项目2,3,4,5,6应显示。
再次用户点击下一个，然后项目＃1和2得到隐藏，3,4,5,6,7应显示
应隐藏最后一项
反转上一个按钮的情况。

这是我到目前为止所做的：

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});

这是我的HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>

可以在http://jsfiddle.net/90faL0c1

找到javascript小提琴

Answer 1

您可以尝试使用此代码替换上一个功能

var first = $('ul').children('li:visible:first');

到

var first = $('ul').children('li:visible:last');

并替换下一个功能

var last = $('ul').children('li:visible:last');

到

var last = $('ul').children('li:visible:first');

Answer 2

你走了：

http://jsfiddle.net/90faL0c1/1/

将功能更改为隐藏并显示相应的数字：

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first'),
    last = $('ul').children('li:visible:last');

    if(first.prev().length > 0){
       last.hide();
       first.prev().show();
    }


});

$('.next').click(function() {
    var first = $('ul').children('li:visible:first'),
    last = $('ul').children('li:visible:last');

    if(last.next().length > 0){
       first.hide();
       last.next().show();
    }

});

多幻灯片旋转木马

2 个答案: