在简单的图像幻灯片中实现 jQuery .next()

Question

jsFiddle 在这里：http://jsfiddle.net/qBQD4/

真的很简单；我想要右箭头向前移动图像，左箭头在简单的幻灯片中向后移动它们。我在将要实现此代码的页面上运行了多个幻灯片，因此我选择了 .next() 路由，而不仅仅是指定唯一的 div id。 HTML 是：

<div class="media">
    <div class="slideButtons">
        <span class="prev"><</span>
        <span class="next">/ ></span>
    </div>
    <ul class="gallery" id="olympGallery">
        <li><img src="http://i.imgur.com/8aA7W.jpg" alt="" title="" /></li>
        <li><img src="http://i.imgur.com/jE7vj.jpg" alt="" title="" /></li>
        <li><img src="http://i.imgur.com/L7lVg.jpg" alt="" /></li>
    </ul>
</div>

jQuery 代码是：

var speed = 100;

$(".prev").click(function() {
    var now = $(this).next("ul.gallery").children(":visible"),
        last = $(this).next("ul.gallery").children(":last"),
        prev = now.prev();
        prev = prev.index() == -1 ? last : prev;
    now.fadeOut(speed, function() {prev.fadeIn(speed);});
});

$(".next").click(function() {
    var now = $(this).next("ul.gallery").children(':visible'),
        first = $(this).next("ul.gallery").children(':first'),
        next = now.next();
        next = next.index() == -1 ? first : next;
    now.fadeOut(speed, function() {next.fadeIn(speed);});
});

$(".gallery li").click(function() {
    var first = $(this).parent().children(':first'),
        next = $(this).next();
        next = next.index() == -1 ? first : next;
    $(this).fadeOut(speed, function() {next.fadeIn(speed);});
});    

最后，一点 CSS：

.prev, .next {position: relative; padding: 3px; font-size:50px; font-weight: 900; cursor:pointer;
}

.gallery li{display:none; list-style:none;}
.gallery li:first-child {display:block;}

.gallery img {
    max-height:550px
}

第三个功能工作正常（单击图像进入系列中的下一个）。但是，前两个完全被打破了。我在这里做错了什么？

Answer 1

用了 20 分钟写出来。。可能有一些非官方的代码行，但工作正常。 JS

        $(document).ready(function () {

        var currentBox=0;

        $("#Right").click(function () {

            var tobox = $(".mainbox").length;
            if(currentBox<tobox-1){
            if (currentBox == 0)
            {
                //if the first slide 
                $(".mainbox:nth(0)").hide();
                $(".mainbox:nth(1)").show();
                currentBox = currentBox + 1;
                //alert("to right:" + tobox +currentBox) ;
            }
            else {

                currentBox = currentBox + 1;
                var h = currentBox - 1;
                var s = currentBox;
                $(".mainbox:nth(" + h + ")").hide();
                $(".mainbox:nth(" + s + ")").show();

                //alert("to right:" + tobox + currentBox);

            }
            } else {
                $(".mainbox:nth(0)").show();
                var a = tobox - 1;
                $(".mainbox:nth(" + a + ")").hide();
                currentBox = 0;
                //alert("end");
            }


        });

        $("#Left").click(function () {



                var tobox = $(".mainbox").length;
                if (currentBox == 0)
                {//if the last slide

                    var a = tobox - 1;
                    $(".mainbox:nth(" + a + ")").show();
                    $(".mainbox:nth(0)").hide();
                    currentBox = a;
                   // alert("to left:" + tobox +currentBox) ;
                }
                else
                {
                   // alert("Current box:"+ currentBox);
                   // 
                    var h = currentBox;
                    var s = currentBox-1;
                    $(".mainbox:nth(" +h+ ")").hide();
                    $(".mainbox:nth(" + s + ")").show();

                   // alert("to right:" + tobox + currentBox);
                    currentBox = currentBox - 1;

                }
            //else { alert("end"); }


            });
        });


</script>

HTML

    <div class="sliderOutbx">

    <div class="Content">
        <div class="NavLeft"><span id="Left">Left</span></div>

        <div class="mainbox">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="mainbox" style="display:none;">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="mainbox" style="display:none;">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>

        <div class="NavRight"><span id="Right">Right</span></div>
    </div>

</div>

希望这可以帮助某人节省一天。

Answer 2

当您使用 .next(selector) 时，您正在寻找匹配选择器的下一个兄弟姐妹。 换句话说，您正在寻找 DOM 树中同一级别的下一个元素。

这是更正后的 jsfiddle：http://jsfiddle.net/QALEE/

您只需要使用 $(this).parent().next("ul.gallery") 来选择下一个“ul.gallery”元素。

Answer 3

在 prev 和 next 函数中，您在尝试查找其关联库之前忘记提升到单击的 div 的父级，即：

var now = $(this).parent().next("ul.gallery").children(":visible")

http://jsfiddle.net/alnitak/qBQD4/1/ 的工作示例

FWIW，你也应该真的把那个步骤分离成一个单独的变量，然后找到相关的图像：

var gallery = $(this).parent().next("ul.gallery");
var first = gallery.children(':first');