0

I try to build image slider with markup HTML and script below:

HTML

<div id="button-previous">prev</div>  <div id="button-next">next</div>


<figure>

<a href="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg">
<img src="http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg" />
</a>

<a href="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg">
<img src="http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg"/>
</a>

<a href="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg">
<img src="http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg"/>
</a>

<a href="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg" >
<img src="http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg"/>
</a>

<figcaption>no need class "active" or "oldActive" or on figcation sematic</figcaption>

</figure>

The script

$(document).ready(function () {
    $('figure a').first().addClass('active');
    $('figure a').hide();
    $('figure a.active').show();

    $('#button-next').click(function () {

        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {
            $('figure a').first().addClass('active');
        } else {
            $('figure a.oldActive').next().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();


    });

    $('#button-previous').click(function () {
        $('figure a.active').removeClass('active').addClass('oldActive');
        if ($('figure .oldActive').is(':first-child')) {
            $('figure a').last().addClass('active');
        } else {
            $('figure a.oldActive').prev().addClass('active');
        }
        $('figure a.oldActive').removeClass('oldActive');
        $('figure a').fadeOut();
        $('figure a.active').fadeIn();
    });

});

ISSUES WITH NEXT CLICK, (last-child)

  1. No have any problerm with #button-previous.
  2. But the script still send/add class="active" at <figcaption> after last-child of figure a when click #button-next at the last-child of figure a.
  3. And slider will stop function rotate to fisrt-child back.

[DEMO]

THANKS IN ADVANCE.

4

1 回答 1

0

问题是figure标签里面，figcaption是最后一个孩子，而不是最后一个a标签！所以第二行$('#button-next').click必须从这个改变：

if ($('figure a.oldActive').is('figure a.oldActive:last-child')) {

...对此：

if ($('figure a.oldActive').is('figure a.oldActive:nth-last-child(2)')) {

jsfiddle

于 2013-10-27T04:50:32.477 回答