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

9wbgstp7 于 2023-05-17 发布在 jQuery

关注(0)|答案(3)|浏览(64)

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
}

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

jquery

来源：https://stackoverflow.com/questions/8724200/implementing-jquery-next-in-a-simple-image-slide-show

3条答案

按热度按时间

kse8i1jr1#

在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');

赞(0）回复(0）举报 2023-05-17

2lpgd9682#

当你使用.next（selector）时，你正在寻找下一个匹配选择器的兄弟节点。换句话说，您正在查找DOM树中同一级别的下一个元素。
下面是正确的jsfiddle：http://jsfiddle.net/QALEE/
您只需要使用$（this）.parent（）.next（“ul.gallery“）来选择下一个“ul.gallery”元素。

赞(0）回复(0）举报 2023-05-17

jhiyze9q3#

写了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>

希望这能帮助一些人保存一天。

赞(0）回复(0）举报 2023-05-17

我来回答

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

3条答案

相关问题

热门标签

最新问答