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 上。我没有测试过，但总体思路应该是正确的。此解决方案的一个问题是，如果互联网连接不佳，则可能会在图像实际下载完成之前拉开窗帘。考虑到这一点有点混乱，所以我没有进入它。

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 回答