0

私はこのHTMLマークアップを持っています:

<div id="leftBtn">Left</div>
<div id="rightBtn">Right</div>

<div id="wrapper">
    <div id="slideshowContainer">
        <div id="slide_1" class="slide"></div>
        <div id="slide_2" class="slide"></div>
        <div id="slide_3" class="slide"></div>
        <div id="slide_4" class="slide"></div>
    </div>
</div>

... 超シンプルなスライドショーに対応しています (コードはすべて jimjimmy1995 の功績によるものです)。現在、左右にスライドしています。右/左ボタンをクリックすると、スライドが重なり合ったり分離したり、不透明度をアニメートしたり、水平にスライドしたりしないようにする必要があります。これが私が持っているものです- Fiddle。私は jQuery に精通していないので、コードを変更する際に助けが必要です。自由に変更してください。ありがとうございました。

ペドロ

4

2 に答える 2

0

時間が足りないため、何か手っ取り早く汚いものです:)あなたの要件を明確に理解しているかどうかわかりません。jquery .animate API を使用してアニメーションを配置します。

注: スライドを切り替えるには、最初と最後の項目にチェックを入れる必要があります。

http://jsfiddle.net/ZkyZx/7/

変更点はスライドショー機能：

function slideShow_animate(){
    $('.slide.active').removeClass('active').stop().animate({
        opacity : 0
    }, 500, function() {
        $(this).next('.slide').addClass('active').stop().animate({
            opacity : 1
        }, 500);
    });
}
于 2013-04-11T12:31:38.977 に答える
0

独自のスライダーをコーディングする代わりに、nivo-sliderをざっと見ることができます。最初からクールなトランジションが含まれており、実装はかなりシンプルです。

幸運を ：）

于 2013-04-11T12:00:35.770 に答える