jquery - 带有.next（）和.prev（）的jquery图像滑块不起作用

Question

我正在尝试使用下一个和上一个按钮编写一个简单的图像滑块。但是我在遍历列表时遇到了问题，尤其是当它是第一张图像并且我单击上一个按钮时。然后滑块应显示最后一个图像。也许有人可以给我一个提示...

我的 HTML：

<div id="slideshow"> 
<img src="img/slide11.jpeg"  alt="" class="active">
<img src="img/slide31.png" alt="">
<img src="img/slide21.png"  alt="">
</div>

单击处理程序：

$(document).ready(function () {
 $('#next').bind('click', function() {
    slideSwitchP('next');
});

 $('#prev').bind('click', function() {
    slideSwitchP('prev');
});
});
}

到目前为止的jQuery代码（不工作）

function slideSwitchP($control) {
var $active = $('#slideshow IMG.active');

var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
var $prev = $next.prev().length ? $active.prev() : $('#slideshow IMG:last');

console.log('next', $next);
console.log('prev', $prev);

$active.addClass('last-active');

if($control === 'next'){ 
console.log($control);
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
if($control === 'prev'){ 
console.log($control);
//prev not working!
}
}

任何想法将不胜感激！谢谢！

Answer 1

我想，你需要这个：

var $prev = $active.prev().....
           //  ^---------instead of `$next`

现场演示