Question

我正在尝试创建一个简单的图像幻灯片，淡入和淡出包含在p标签中的上一个和下一个图像，因为wordpress如何做到这一点，我已设法让它移动到下一个图像但我不能让它移动到上一个图像。点击上一个或下一个，我也希望它保持连续永不停止的循环。

这是我的HTML

<div>
  <div id="prev">Previous Image</div>
  <div id="next">Next Image</div>
  <div id="slides">
    <p class="slideWrap">
      <img src=""  alt="" title="Untitled-2" class="alignnone size-full wp-image-460" height="500" width="500" />
    </p>
    <p class="slideWrap">
      <img src=""  alt="" title="fishy" class="alignnone size-full wp-image-369" height="496" width="437" />
    </p>
  </div>
</div>

这是我的jquery

$('.slideWrap:not(:first)').hide();
$currentBox = $(".slideWrap");

$("#next").click(function() {
  $currentBox.fadeOut(function() {
    $currentBox = $currentBox.next();
    $currentBox.fadeIn('300');
  });
});
$("#prev").click(function() {
  $currentBox.fadeOut(function() {
    $currentBox = $currentBox.prev();
    $currentBox.fadeIn('300');
  });
});

继承人http://satbulsara.com/luke-irwin/rugs/floral/testing-slide/

Answer 1

有很多方法可以执行此操作，但this one应该非常接近您现有的代码：

$('.slideWrap:not(:first)').hide();
var $boxes = $(".slideWrap"),
    $currentBox = $boxes.first().show();

$("#next").click(function() {
    $currentBox.fadeOut(300, function() {
        $currentBox = $currentBox.next();
        if (!$currentBox.length) {
            $currentBox = $boxes.first();
        }
        $currentBox.fadeIn(300);
    });
});
$("#prev").click(function() {
    $currentBox.fadeOut(300, function() {
        $currentBox = $currentBox.prev();
        if (!$currentBox.length) {
            $currentBox = $boxes.last();
        }
        $currentBox.fadeIn(300);
    });
});

jquery幻灯片在图像上创建上一个下一个循环

1 个答案: