-4

私はしばらくの間グーグルで離れていて、助けが必要だと気づきました。

私は私の友人のためにPHPで何かを開発していますが、彼は自分のWebサイトで（私にとって）画像スライダーをプログラムするのが非常に難しいことを望んでいます。私はオランダ人です。ここで紹介する例は、オランダのWebサイト（http://www.iboma.com/index.asp ）です。同様のアニメーションを作成しようとしていますが、javascript/jQueryを使用しています。

サンプルの木材を表示する代わりに、画像と対応するリンクをフェードインする必要があります。テキストは余分かもしれません。必要ありません。

標準のスライダーでは不十分なので、カスタムコードが必要です。派手なアニメーションはありません。クロスフェードが理想的です。画像がフェードインした後、サンプルWebサイトにも表示されているオーバーレイロゴを維持しながら、背景画像をオーバーレイする際に画像とリンクをフェードインする必要があります。

PHPから画像スライダー画像をJSON配列でフィードするか、Webサイトにプリロードします（おそらく検索エンジンに適しています）。

var photos = [  { image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.stackoverflow.com/" }, 
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.google.com/" },
{ image: "http://localhost/foobar.png", logo: "http://localhost/foobar.png", link: "http://www.yahoo.com/" }];

そのようなアニメーションを開発する途中で私を助けてくれませんか？

発進：

私は、物事をアニメーション化するためにトリガーする必要のあるさまざまなイベントをスタックする効率的な無限ループを作成する方法を理解しようとしています。

まず、通常のjavascriptを使用しますか、それとも負荷と速度に関してjQueryを使用する方がよいでしょうか？

第二に、無限ループのためのそのようなコードの良い実装は何ですか？

第三に、アニメーションの流れを妨げずに、さまざまなイベントを次々にトリガーするにはどうすればよいですか。

第4に、アニメーション中に背景画像を変更するときに、オーバーレイするロゴがアニメーションの背後に表示されないようにするにはどうすればよいですか？これは私の主な問題の1つです。フェードインとフェードアウトを使用すると、ロゴが画像の後ろに消えます。

提案？

4

3 に答える 3

0

私はしばらくの間グーグルをしていて、本当に助けが必要だと気づき始めています。

上記の行は私には意味がありません。

グーグルに「画像スライダー」と入力したところ、これが最初の結果です。

http://nivo.dev7studios.com/

これはあなたが求めているものと非常によく似ています。

画像スライダーの無料コードがあり、リンク、テキスト、必要なもののほとんどすべてが付属しています。

于 2012-06-08T13:08:36.250 に答える
0

OK、あなたがすでに知っている限り、誰もあなたのためにそれを書くことはないでしょう;）私はあなたにそれを簡単に行うことができるスライドショーをお勧めすることができます-http://jquery.malsup.com/cycle/

$('#slideshow').cycle({ 
   fx: 'fade', 
   after:   onAfter 
});

function onAfter(curr, next, opts, fwd) { 
     //here you make animation with text and small image
};

とてもシンプルなので、すべてのアニメーションを楽しくするだけです。それを試してみてください。必要なものを作成するために、独自のスライドショーコードを作成する必要はありません。

于 2012-06-08T13:15:40.793 に答える
0

ついに私が必要なものを手に入れました。

Sófkaあなたは私の途中で私を助けてくれました。そのためのThx。それは私が必要としていたものでした。ああ、私はこれにオービット画像スライダーを使用しました。

次のコードは私のために働きます：

(function($) {
        $(document).ready(function() {
            $('#featured').orbit({
                animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
                animationSpeed: 500,                // how fast animtions are
                timer: true,                        // true or false to have the timer
                advanceSpeed: 6000,                 // if timer is enabled, time between transitions
                pauseOnHover: true,                 // if you hover pauses the slider
                startClockOnMouseOut: true,         // if clock should start on MouseOut
                startClockOnMouseOutAfter: 0,       // how long after MouseOut should the timer start again
                directionalNav: false,              // manual advancing directional navs
                captions: false,                    // do you want captions?
                captionAnimation: 'fade',           // fade, slideOpen, none
                captionAnimationSpeed: 800,         // if so how quickly should they animate in
                bullets: false,                     // true or false to activate the bullet navigation
                bulletThumbs: false,                // thumbnails for the bullets
                bulletThumbLocation: '',            // location from this file where thumbs will be
                beforeSlideChange: function() {
                    $('#featured a, #featured span').fadeOut(400, function() {
                        $('#featured a, #featured span').remove();
                    });

                    $('#featured img').each(function(index) {
                        if ($('#featured img').eq(index).css("z-index") == 3) {
                            var className = $('#featured img').eq(index).attr("class");
                            $('#featured img')
                                .eq($('#featured img').index(this))
                                .after($('#featured-images .' + className)
                                    .clone()
                                    .css("z-index","4")
                                );
                            $('#featured a.' + className)
                                .css("top",$("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 50)
                                .css("left",$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 50)
                                .fadeIn(1000, function() {
                                    $('#featured a.' + className + ' img').fadeIn(1500);
                                    $('#featured img')
                                        .eq($('#featured img').index(this))
                                        .after($('#featured-text .' + className)
                                            .clone()
                                            .css({"z-index":"4",
                                            "top":"0px",
                                            "display":"block",
                                            "opacity":0,
                                            "position":"absolute",
                                            "left":$("#featured img." + className).width() - $("#featured img." + className).next("a").width() - 70 - $('#featured-text .' + className).width()})
                                        );
                                    $('#featured span.' + className).animate({
                                        opacity: 1,
                                        top: $("#featured img." + className).height() - $("#featured img." + className).next("a").height() - 25
                                    }, 1000);
                                });

                        }
                    });
                }
            });
        });
    }(jQuery));

コードライブラリにいくつかのイベントフックを自分で追加する必要がありましたが、それほど難しくはありませんでした。

HTML：

<div id="featured">
                <img src="http://localhost/foo/images/bar.png" class="image-1" width="924" height="317" alt="" />
                <img src="http://img265.imageshack.us/img265/3355/62320763.jpg" class="image-2" width="924" height="317" alt="" />
                <img src="http://img411.imageshack.us/img411/1237/75707805.jpg" class="image-3" width="924" height="317" alt="" />
            </div>
            <div id="featured-images">
                <a href="" class="image-1" style="width:100px;height:50px;border:1px solid #FFF;"><img src="http://localhost/foo/images/foobar.png" width="100" height="50" alt="" style="display:none" /></a>
            </div>
            <div id="featured-text">
                <span class="image-1" style="display:none;font-size:30px;color:#FFF;">Dit is een test</span>
            </div>
于 2012-06-26T16:44:51.613 に答える