Question

限制：仅限HTML，Javascript（Jquery）

目标：可以使用左箭头和右箭头更改幻灯片的幻灯片。

代码示例1（停止）：https://jsfiddle.net/Penguinlay/8syyktd4/1/

HTML

<div class="card">
  1
</div>

<div class="card">
  2
</div>

<div class="card">
  3
</div>

<div class="card">
  4
</div>

<div class="card">
  5
</div>

<div class="card">
  6
</div>

<div class="card">
  7
</div>

脚本1

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;
  old = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {
    old = current;

    if(entry.keyCode == 37) {
      if(old == first)
        current = first;
      else
        current = old.prev();
    }

    if(entry.keyCode == 39) {
      if(old == last)
        current = last;
      else
        current = old.next();
    }
    $(".card").hide();
    current.toggle();
  });
});

代码示例2（循环）：https://jsfiddle.net/Penguinlay/8syyktd4/3/

与上述HTML相同。

脚本2

$(document).ready(function() {
  var first, prev, current, next, last;

  first = $(".card:first");
  last = $(".card:last");
  prev = last;
  current = first;
  next = first.next();

  $(".card").not(first).hide();

  $(document).keydown(function(e) {
    if(e.keyCode == 37) {
      next = current;
      current = prev;
      if(current == first)
        prev = last;
      else
        prev = current.prev();
      $(next).fadeOut(1);
    }

    if(e.keyCode == 39) {
      prev = current;
      if(current == last)
        current = first;
      else
        current = next;
      next = current.next();
      $(prev).fadeOut(1);
    }

    $(current).fadeIn(100);
  });
});

问题：

在样本1中，单击左箭头时幻灯片应停在幻灯片1上。它在运行时正常工作，但在访问其他幻灯片后返回到幻灯片1，左箭头单击幻灯片1不会停止，但会给我白屏。

所以，我尝试了样本2中的一个不同的脚本，左箭头点击幻灯片1，引导我到最后一张幻灯片。再次，它在运行时正常工作，但在访问其他幻灯片后返回到幻灯片1，左箭头单击幻灯片1不会转到最后一张幻灯片，但给我白屏。

它也不适用于右箭头。与上面完全相同的问题。

它不适用于最新版本的Chrome，Firefox，Firefox开发版，Microsoft Edge和JSFiddle。

我该怎么做才能按预期工作（分别停在幻灯片1或最后一张幻灯片上）？

Answer 1

如果您使用Jquery 1.6及以上版本：

样本1：

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {

    if(entry.keyCode == 37) {
     if(!current.is(first))
       current = current.prev();
    }

    if(entry.keyCode == 39) {
      if(!current.is(last))
        current = current.next();
    }

    $(".card").hide();
    current.toggle();

  });
});

样本2：

$(document).ready(function() {
  var totalCard, first, last, current, old;

  first = $(".card:first");
  last = $(".card:last");
  current = first;

  $(".card").not(current).hide();

  $(document).keydown(function(entry) {

    if(entry.keyCode == 37) {
          if(current.is(first)){
            current = last;
           }else{
            current = current.prev();
          }
    }

    if(entry.keyCode == 39) {
       if(current.is(last)){ 
         current = first;
       }else{
        current = current.next();
       }
    }

    $(".card").hide();
    current.toggle();

  });
});

每当你调用$（＆＃34; .card：first＆＃34;）时，你实际上正在做一个jQuery（＆＃34; .card：first＆＃34;），它返回一个新对象。因此，比较它们并期望相同的对象是不正确的。

对于参考：jQuery object equality

Jquery隐藏功能有时不适用于幻灯片放映

1 个答案: