1

我需要一些帮助，我正在尝试创建一个非常简单的 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>​

查询：

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

但我需要它们在下一次和上一次点击时自动向上滑动到下一个 div。请任何帮助将不胜感激！

4

4 回答 4

3

你在尝试这样的事情吗？

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;
}
于 2012-04-30T15:41:34.370 回答
1

这是使用 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

于 2012-07-02T12:17:26.523 回答
0

试试这个：

<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

于 2012-04-30T15:39:27.817 回答
0

您可以使用标记类标记 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在这里

于 2012-04-30T15:40:01.293 回答