Question

我需要一些帮助，我正在尝试创建一个非常简单的jquery滑块..当我点击一个按钮时，我想要四个div向上滑动。但我无法理解如何做到这一点。以下是我在jsfiddle.net中的内容：http://jsfiddle.net/liveandream/LFAMW/

这是我的代码：

<div id="slider">
<div class="slide1" style="background: red"></div>
<div class="slide2" style="background: green"></div>
<div class="slide3" style="background: black"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

JQUERY：

$("#next").click(function(){
    $(".slide1").slideUp();
});

但是我需要它们自动滑动到下一次和上一次点击的下一个div。非常感谢任何帮助！

Answer 1

您是否正在尝试this之类的内容？

HTML：

<div id="slider">
<div class="slide" style="background: red"></div>
<div class="slide" style="background: green;display: none;"></div>
<div class="slide" style="background: black; display: none;"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

使用Javascript：

$("#next").click(function(){
    var $next = $(".slide:visible").slideUp().next('.slide');
    if($next.size() < 1) {
        $next = $(".slide:first");
    }
    $next.slideDown();
});

$("#prev").click(function(){
    var $prev = $(".slide:visible").slideUp().prev('.slide');
    if($prev.size() < 1) {
        $prev = $(".slide:last");
    }
    $prev.slideDown();
});

CSS：

.slide {
width: 300px;
height: 300px;

}
#slider{
width: 300px;
height: 300px;
}

Answer 2

以下是使用JQuery的完整幻灯片演示Prev和Next解决方案：

$(document).ready(function() {
$("#next").click(function() {
    if ($('.current').next('.slide').length > 0) {
        $(".current").slideUp();
        $('.current').removeClass('current').next('.slide').addClass('current');
    }

});
$("#prev").click(function() {
    if ($('.current').prev('.slide').length > 0) {
        $('.current').removeClass('current').prev('.slide').addClass('current');
        $(".current").slideDown();
    }

});

}）;

我使用http://codebins.com/codes/home/4ldqpc9

上的解决方案创建了一个bin

Answer 3

试试这个：

<div id="slider">
<div class="slide1 slide current" style="background: red"></div>
<div class="slide2 slide" style="background: green"></div>
<div class="slide3 slide" style="background: black"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

JS：

$("#next").click(function(){
    $(".current").slideUp();
    $('.current').removeClass('current').next('.slide').addClass('current');

});

你需要为前一个按钮添加一些逻辑，并确定你何时在最后一个或第一个div

Answer 4

您可以使用标记类标记div，并使用jQuery移动标记，例如

<div id="slider">
<div class="slide1 slide current" style="background: red"></div>
<div class="slide2 slide" style="background: green"></div>
<div class="slide3 slide" style="background: black"></div><br clear="all">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

$("#next").click(function(){
    $(".current").slideUp(function() {
        $(this)
            .removeClass('current')
            .next('.slide')
            .addClass('current');
    });
});

jsfiddle here

Jquery向上滑动div

4 个答案: