如何使用 javascript/ASP.NET/CSS 旋转和淡入淡出背景图像答案

【问题标题】：How to rotate and fade background images in and out with javascript/ASP.NET/CSS如何使用 javascript/ASP.NET/CSS 旋转和淡入淡出背景图像
【发布时间】：2010-09-13 20:29:48
【问题描述】：

我需要随机淡入淡出背景图像。

这将是一个定时功能，例如每 5 秒一次。
我需要使用 ASP.NET、Javascript、CSS 或全部三者来完成。

请大家帮帮我。谢谢。

【问题讨论】：

标签： asp.net javascript css image-manipulation

【解决方案1】：

Cycle，一个jQuery插件，是一个非常灵活的图片旋转解决方案：http://malsup.com/jquery/cycle/

【讨论】：

【解决方案2】：

这就是答案：别介意伙计们，在 Google 上进行了更精确的搜索之后。我找到了一个很好的解决方案。

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: Steve S - http://jsmadeeasy.com/ 
-->

<style>
body
{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: 300 200;
}
</style>

<script language="JavaScript1.2">
/* you must supply your own immages */
var bgimages=new Array()
bgimages[0]="http://js-examples.com/images/blue_ball0.gif"
bgimages[1]="http://js-examples.com/images/red_ball0.gif"
bgimages[2]="http://js-examples.com/images/green_ball0.gif"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide()
{
  if (inc<bgimages.length-1)
    inc++
  else
    inc=0
  document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlide()",3000)')
</script>

</head>
<body>
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center> 
</body>
</html>

Found it here.

【讨论】：

【解决方案3】：

刚刚在...
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

找到了有关如何使用 CSS 背景图像和 jQuery 执行此操作的教程

似乎相当深入。打算尝试将它用于我目前正在进行的项目。将报告结果如何。

编辑 1

上面引用的 jQuery 似乎解决了我的问题，而 jQuery Cycle 插件无法解决。以http://egdata.com/baf/ 为例。主要问题是幻灯片包含 1500 像素宽的幻灯片，页面宽度为 960 像素。

由于某种原因，jQuery Cycle 插件在显示当前幻灯片时为宽度添加了一个 css 样式属性。最初它看起来正确，但在调整浏览器窗口大小时失败。 Cycle 似乎在加载时设置了幻灯片的宽度，在我的情况下，我需要宽度保持 100%，而不是窗口的实际像素宽度。 http://egdata.com/baf/index_cycle.html

【讨论】：

两年后... :) 我个人会推荐 jQuery 工具：flowplayer.org/tools/tabs/slideshow.html
我的特定场景不适用于定义内联图像的标准 jQuery 幻灯片设置。由于幻灯片图像大于内容宽度（无水平滚动条），我特别需要在 css background-image 属性中定义图像。这可以补偿超出 960 像素页面宽度的渐变。明天准备好后，我将分享一个示例。
jQuery 工具幻灯片通常使用divs 作为标签内容（但它可以是您指定的任何 HTML 元素）。你可以设置background-image任何你想要的。