Question

真的很简单;我希望右箭头向前移动图像，左箭头以简单的幻灯片方式向后移动它们。我在页面上运行了多个幻灯片，这些代码将在其上实现，因此为什么我已经使用.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
}

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

Answer 1

在上一个和下一个函数中，您在尝试查找其关联的图库之前忘记了提升到点击的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');

Answer 2

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

以下是更正过的jsfiddle：http://jsfiddle.net/QALEE/

您只需要使用$（this）.parent（）。next（“ul.gallery”）处于良好的水平以选择下一个“ul.gallery”元素。

Answer 3

在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>

希望这可能有助于某人节省一天。

在简单的图像幻灯片放映中实现jQuery .next（）

3 个答案: