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

【问题标题】：jquery image slider with .next() and .prev() not working带有.next（）和.prev（）的jquery图像滑块不起作用
【发布时间】：2012-07-08 13:55:19
【问题描述】：

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

我的 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!
}
}

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

【问题讨论】：

标签： jquery image slider

【解决方案1】：

我想，你需要这个：

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

Live demo

【讨论】：