1

非常に単純な jquery スライダーを作成しようとしています。ボタンをクリックすると 4 つの 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>​

Jクエリ:

$("#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 を使用した完全なスライド ショーの前と次のソリューションを次に示します。

$(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のソリューションでビンを作成しました

于 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 に答える