1

私は大学の授業の一環としてウェブサイトを構築していますが、ランディングページのデザインはかなり野心的で、教授を驚かせるように設計されています。

さまざまな種類の画像、jpeg、png、アニメーションGIFが必要ですが、これらはすべて読み込み時間と優雅さに悪影響を及ぼしているようです。

つまり、私が作成しているのは、ステージをテーマにした小さな画像カルーセルです。私が作成しようとしているのは、次のとおりです。

Roll curtain up revealing first image   
Roll curtain down & change to second image
Roll curtain up revealing second image 
Roll curtain down & change to third image
Roll curtain up revealing third image
and so on.. looping through the images indefinitely

これが行われている間、画像カルーセルをオーバーレイする単純なアニメーションのスポットライトgifがあり、常に実行されています。

これを実現する方法はいくつかあることを認識しており、最もスムーズで正確な方法を見つけようとしています。私がこれまでに構築できたのは、それほどすごいことではない基本的なイメージカルーセルと、ほとんどのブラウザーでのみ初めてロールアップするカーテンです（Dreamweaver CS5では常にロールアップおよびロールダウンするだけです）。

私はさまざまな方法を試し、関連する例を見つけるために3日間ウェブを検索してきたので、ここで質問しています。任意の提案をいただければ幸いです。

ここで実際の例を見ることができます

これが私のJavaScriptです：

$(document).ready(function() {
var imgs = ['images/logopic.png','images/lobby.png','images/worksofshake.jpg','images/worksofshake.jpg'];
var cnt = imgs.length;
setInterval(Slider, 6000);

function Slider() {
    $('#imageSlide').fadeOut("fast", function() {
        $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
    });
$("#curtaindown").animate({height:"95%"});
    /*$("#curtaindown").animate({height:"75%"});
    $("#curtaindown").animate({height:"50%"});
    $("#curtaindown").animate({height:"30%"});*/
    $("#curtaindown").animate({height:"5%"},5000);
    $("#curtaindown").animate({height:"95%"},5000);
    $(".leadinfo").hide();
    }
});

ありとあらゆる助けをありがとう。

4

2 に答える 2

2

このソリューションは、ページの読み込み時にカーテンが画像を覆い、最初の画像がすでに #imageSlide に設定されていることを前提としています。私はそれをテストしていませんが、一般的な考え方は正しいはずです。このソリューションの問題点の 1 つは、インターネット接続が悪いと、画像のダウンロードが実際に完了する前にカーテンが引き離される可能性があることです。それを説明するのは少し厄介なので、私はそれについては触れませんでした.

var imgs = [...];
var nextImage = 1;
var $image = $('#imageSlide');
var $curtain = $('#curtaindown');

hideCurtain();
preloadNextImage();
// Show the next image in 6 seconds
setTimeout(showNextImage, 6000);

function showNextImage() {
  showCurtain(function(){       
    // Set the img tag to the new image
    $image.attr('src', imgs[nextImage]);

    nextImage++;
    if (nextImage.length >= imgs.length)
      nextImage = 0;
    preloadNextImage();

    // After the curtain is hidden, wait 5 more seconds before
    // switching to the next one.
    hideCurtain(function(){
        setTimeout(showNextImage, 5000);
    });
  });
}

function showCurtain(onComplete) {
  $curtain.animate({height:'95%'},
      { duration: 500,
        complete: onComplete });
}

function hideCurtain(onComplete) {
  $curtain.animate({height:'5%'},
      { duration: 500,
        complete: onComplete });
}

function preloadNextImage() {
  // Start downloading the next image.
  (new Image()).src = imgs[nextImage];
}
于 2013-01-04T19:25:43.417 に答える
0

私は最終的に、論理的にそうすべきではないとかなり確信しているにもかかわらず、機能する非常に単純な実装に落ち着きました。なぜそれが機能するのかを説明するために誰かがコメントできれば、私はとても感謝しています.

これは私が最終的に使用したコードです:

<script type="text/javascript">

$(document).ready(function() {

    $("#scroller_container_top").hide();

    var imgs = ['images/logopic.png','images/lobbywithcaption.jpg','images/seatswithcaption.jpg','images/worksofshake.jpg'];
var cnt = imgs.length;
setInterval(Slider, 10000);

function Slider() {
    $('#imageSlide').fadeOut("slow", function() {
        $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");

    });

    $("#curtaindown").animate({height:"5%"},5000);
    $("#curtaindown").animate({height:"95%"},5000);     

};

</script>
于 2013-01-24T19:26:38.677 に答える