jQuery图像滑块与.next（）和.prev（）不起作用

Question

Iam试图用next和prev按钮编码一个简单的图像滑块。 但我有遍历列表的问题，特别是当它的第一个图像，我点击prev按钮。 滑块应显示最后一张图像。 也许有人可以给我一个提示...

我的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` 

Live demo