将div移动到其父级的开头

时间:2014-10-23 11:54:08

标签: javascript jquery slider slideshow

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

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

3 个答案:

答案 0 :(得分:2)

你可以这样做

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

答案 1 :(得分:0)

这是我的解决方案:

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

答案 2 :(得分:0)

在这里找到小提琴: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获得幻灯片大小并重新定位你的按钮......