jQuery slideshow在图像上创建上一个下一个循环

问题描述

| 我正在尝试创建一个简单的图像幻灯片，以根据wordpress的方式淡入和淡出包裹在p标签中的上一个和下一个图像，我设法将其移至下一个图像，但无法获取移至上一张图片。我也希望在单击上一个或下一个时保持连续的永无休止的循环。 这是我的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/     

解决方法

        有很多方法可以执行此IMO，但是这应该与您现有的代码非常接近：

$(\'.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);
    });
});