jquery 幻灯片不会遍历 dom

Question

我发现这个 Jquery 幻灯片片段非常适合我，只是它不会重复 DOM。现在只有我文档中的第一个幻灯片可以使用。我到处搜索，我很确定我需要使用 .each() 以便它会在我的文档中找到所有 #slideframe DIV。不幸的是我似乎无法正确使用它。任何帮助我提高投资组合的帮助运行都会有很大的帮助！

您可以在此处查看 "working" 站点：LINK

这是我的 JQUERY

<script language="javascript">    $(document).ready(function () {
    var count = $('#slideframe').children().length;
    $("#total").text(count);
    // set display:none for all members of ".pic" class except the first
    var hidden = $('#slideframe').children();
    $('hidden:gt(0)').hide();

    // stores all matches for class="pic"
    var $slides = $('#slideframe').children();

    $slides.click(function () {

        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is($slides.last())) {
            $("#current").text("1");
            $current.hide();
            $slides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $("#current").text($current.next().index()+1);
            $current.hide().next().show();
        }

    });
});</script>

这是我的 HTML:

<div class="projectcontainer">
<div id="slideframe">
            <video class="image" src="NEW/PHOTOS/AW17_FW_INSTA_LOCKUP_LO.mp4" type="video/mp4" autoplay loop></video>
            <img class="image" src="NEW/PHOTOS/AW17_LONDON_SQUARE.jpg" style="display: none;">
            <img class="image" src="NEW/PHOTOS/AW17_MILAN_SQUARE.jpg" style="display: none;">
            <img class="image" src="NEW/PHOTOS/AW17_NEWYORK_SQUARE.jpg" style="display: none;">
</div>


        <div class="imagetext">
            <div class="counter"><span id="current">1</span> / <span id="total">4</span></div>
            MAC Cosmetics AW17 Fashion Week Branding<br>
            ( Illustrations by <a href="culturesport.tv">culturesport.tv</a> )
        </div>

1 / 4 MAC 化妆品 AW17 时装周品牌推广
（插图由 culturesport.tv 提供）

Answer 1

您不能多次使用一个 ID。您目前在不止一处有 id="slideframe"。 jQuery 只能看到第一个实例。尝试将 slideframe 更改为 class.

Answer 2

首先，每个 DOM 元素只能使用一个 ID。因此，如果您想引用多个 slideframe 元素，请考虑使用 class 标识符，例如以下示例：

<div class="slideframe">

（请注意，您还需要更新 #current 和 #total 元素，以便它们的 ID 也不会重复。）

然后，在 jQuery 中，您将按如下方式引用这些幻灯片：

$('.slideframe')

此外，就您的观点而言：您可能希望遍历两个幻灯片框架，例如，对 .last() 的调用将与正确的幻灯片框架相关。

var $frames = $('.slideframe');
$frames.each(function() {
   var currentFrame = $(this);
   var currentSlides = currentFrame.children();
   currentSlides.click(function () {

        // stores the currently-visible slide
        var $current = $(this);
        if ($current.is(currentSlides.last())) {
            $(".current", currentFrame.next()).text("1"); // note this assumes you have set DOM element to use class="current"
            $current.hide();
            currentSlides.first().show();
        }
        // else, hide current slide and show the next one
        else {
            $(".current", currentFrame.next()).text($current.next().index()+1); // note this assumes you have set DOM element to use class="current"
            $current.hide().next().show();
        }

    });   
});

jquery 幻灯片不会遍历 dom

jquery slideshow won't iterate over dom

html

javascript

each

jquery

dom