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