淡入淡出效果实现。
$(".slider-container:first-child", ".sliders").addClass("current").fadeIn(300);
$(".next-button").click(function () {
var current = $(".slider-container.current", ".sliders").removeClass("current").fadeOut(300);
current.fadeOut(300, function () {
var next = current.next();
if (next.length == 0) {
$(".slider-container:first-child", ".sliders").addClass("current").fadeIn(300);
} else {
next.addClass("current").fadeIn(200);
}
});
});
$(".prev-button").click(function () {
var current = $(".slider-container.current", ".sliders").removeClass("current").fadeOut(300);
current.fadeOut(300, function () {
var prev = current.prev();
if (prev.length == 0)
{ $(".slider-container:last-child", ".sliders").addClass("current").fadeIn(300); }
else {
prev.addClass("current").fadeIn(200);
}
})
})
<div class="slider-container">
<div class="sliders">
<div class="slider">
aaaaaaa
</div >
<div class="slider">
bbbbbb
</div >
<div class="slider">
cccccc
</div >
</div>
</div>