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

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

1 个答案: