动态加载图像的几种好方法是什么

What are a few good ways to load images dynamically?

本文关键字：几种 方法 是什么 加载 图像 动态      更新时间：2024-04-23

我有一个主主页。我想做很多网站目前正在做的事情，他们动态地显示一些大图像。具体来说，我有5张900px乘400px的图片想要展示-我可以用Javascript setInterval等来完成-但我也想知道如何添加一些渐变效果-我用c#编码，但我能想到的唯一优雅的方法是用Javascript-如果有人能给我一个教程链接或粘贴他们喜欢的代码片段，我将不胜感激。谢谢！

用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滑块插件，如以下插件之一：

  • http://nivo.dev7studios.com/
  • http://slidesjs.com/
  • http://snook.ca/technical/fade/fade.html
  • http://wowslider.com/

您需要的是一个jQuery图像caroonal。

在这里张贴一些最好的链接。

1）http://wowslider.com/demo.html：太棒了，可以很好地整合
2）http://www.jcoverflip.com/
3）http://galleria.io/：现象

您还可以查看jQuery效果，以便更好地实现自己的效果。

BXSlider是一个非常轻量级、易于使用的jquery滑块。

请参阅http://bxslider.com.

特点

  • 水平、垂直和渐变
  • 同时显示和移动多个幻灯片（转盘）
  • 上一页/下一页、寻呼机、自动控制
  • 缓和过渡
  • 随机启动
  • Ticker模式
  • Before、after、first、last、next、prev回调函数
  • 包括可选样式
  • 成吨的选项
相关文章：