Question

我制作滑块，除了上一个按钮外，一切都很好。这是我的开始：

<div class="slideshow">
    <div id="1" class="slider">
            <button class="full prevSlide">-</button> 
            <button class="full nextSlide">+</button>
    </div>
    <div id="2" class="slider">
            <button class="full prevSlide">-</button> 
            <button class="full nextSlide">+</button>
    </div>
<div id="3" class="slider">
            <button class="full prevSlide">-</button> 
            <button class="full nextSlide">+</button>
    </div>
</div>

因此，当我第一次点击+按钮时，＃1会在＃3之后移动，并带有以下代码：

function showNextSlide(el) {
    el.each(function(){
        $(this).children("div.slider:first").fadeOut()
     .next('div.slider').fadeIn()
     .end().appendTo(this);
    });
}

但是当我点击 - 按钮时，如何在＃2之前移动＃1？这是我的prev按钮的代码：

function showPrevSlide(el) {
    el.each(function(){
        $(this).children("div.slider:first").fadeOut();
        $(this).children('div.slider:last').fadeIn();
        $(this).prepend(this);
    });
}

我的小提琴：http://jsfiddle.net/yy3js4b4/1/ 提前谢谢。

Answer 1

你可以这样做

var index = 0;
$(".slider:not(:first)").hide();
$(".nextSlide").click(function() {
    $(".slider").hide();
    index++;
    index = index % $(".slider").length;
    $(".slider").eq(index).show();
});
$(".prevSlide").click(function() {
    $(".slider").hide();
    index--;
    index = index % $(".slider").length;
    $(".slider").eq(index).show();
});

Fiddle

<强> 修改

var index = 0;
$(".slider:not(:first)").hide();
$(".nextSlide").click(function() {
    var slider=$(this).closest(".slideshow").find(".slider")
    slider.fadeOut();
    index++;
    index = index % slider.length;
    slider.eq(index).fadeIn();
});
$(".prevSlide").click(function() {
    var slider=$(this).closest(".slideshow").find(".slider")
    slider.fadeOut();
    index--;
    index = index % slider.length;
    slider.eq(index).fadeIn();
});

Updated Fiddle

Answer 2

这是我的解决方案：

function showPrevSlide(el) {
        el.each(function(){
            $(this).children("div.slider:first").fadeOut();
            $(this).children('div.slider:last').fadeIn();
            $(this).prepend($(this).children('div.slider:last'));
        });
    }

Answer 3

在这里找到小提琴：http://jsfiddle.net/yy3js4b4/4/

我改变了什么：首先，你只需要一次prev下一个按钮 - 只需将它们放在你的幻灯片标记下面

<div class="slideshow">
    <div class="slide"></div> 
    ... and so on
</div>
<button class="full prevSlide">-</button> 
<button class="full nextSlide">+</button>

然后我简化了你的功能。使用您的解决方案，让活动幻灯片始终位于滑块列表的第一位置，您不需要传递任何元素。

function showNextSlide() {
    $('.slideshow > .slider:first').fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.slideshow');
}

对于上一个按钮，您可以这样做：

function showPrevSlide() {
    $('.slideshow > .slider:first').fadeOut(1000);
     $('.slideshow > .slider:last')
     .fadeIn(1000)
     .prependTo('.slideshow');
}

使用这个解决方案，你的幻灯片有点跳跃 - 因为我们没有任何css样式但是有交叉效果，新幻灯片将在旧幻灯片下面打开并且在旧幻灯片完成淡出之后，它会跳到最顶端。

我通常用一个位置解决这个问题：幻灯片的绝对位置。但是你还必须手动定位你的上一个/下一个按钮...这会限制你的幻灯片的特定大小 - 或者你必须通过js获得幻灯片大小并重新定位你的按钮......

将div移动到其父级的开头

3 个答案: