将 div 移动到其父级的开头答案

【问题标题】：Move a div to the start of his parent将 div 移动到其父级的开头
【发布时间】：2014-10-23 11:54:08
【问题描述】：

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

<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);
    });
}

但是当我点击 - 按钮时，如何将 #1 移动到 #2 之前？这是我的上一个按钮的代码：

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/ 提前致谢。

【问题讨论】：

你能为此制作一个小提琴吗？

标签： javascript jquery slider slideshow

【解决方案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

【讨论】：

我不能，因为页面上有多个滑块
所以呢？是什么让它不可能？
感谢您的宝贵时间；我找到了另一种移动 div 的解决方案
@Meezy 至少为解决您的问题所付出的努力投赞成票！

【解决方案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'));
        });
    }

【讨论】：

【解决方案3】：

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

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

<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 获取幻灯片大小并重新定位您的按钮...

【讨论】：