有哪些动态加载图像的好方法?

时间:2012-07-28 15:37:12

标签: c# javascript loading

我有一个主页。我想做很多网站目前正在做的事情,他们动态地动态显示一些大图像。具体来说,我有5张900px×400px的图像我想要显示 - 我可以用Javascript setInterval等来做 - 但我想知道如何添加一些淡入淡出效果 - 我用c#编码,但是我能想到的唯一优雅的方法是使用javascript - 如果有人可以给我一个教程的链接或粘贴他们喜欢的方式的代码片段,我会很感激。谢谢!

3 个答案:

答案 0 :(得分:2)

C#中的编码不会让你淡化效果,你需要Javascript。您可以使用C#加载图像的第一个实例,但任何带有效果或计时器的东西都需要使用Javascript或jQuery。大多数网站实际上都会使用jQuery插件来实现这种主要淡入/淡出幻灯片功能。有很多滑块插件对你有好处。

如果你觉得自己想要建立自己的东西,那么这里有一些东西可以帮助你。

<img src="img0.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

每隔4秒,它会迭代图像1到4,淡入淡出。

或者,您可以下载预构建的jQuery滑块插件,如下所示:

答案 1 :(得分:1)

你需要的是一个jQuery图像carousal。

在这里提供一些最好的链接。

1)http://wowslider.com/demo.html:很棒的作品,可以很好地整合 2)http://www.jcoverflip.com/
3)http://galleria.io/:惊人的

您也可以查看jQuery effects,以便更好地实施自己的一个。

答案 2 :(得分:0)

BXSlider是一款非常轻巧易用的jquery滑块。

请参阅http://bxslider.com

功能

  • 水平,垂直和淡入淡出过渡
  • 一次显示和移动多张幻灯片(轮播)
  • 上一个/下一个,寻呼机,自动控制
  • 缓和过渡
  • 随机开始
  • 代码模式
  • 之前,之后,第一个,最后一个,下一个,上一个回调函数
  • 包括可选样式
  • 众多选择