如何使用javascript / ASP.NET / CSS旋转背景和淡入和淡出背景图像
时间：2020-03-06 14:50:51 来源:igfitidea点击:
我需要随机淡入和淡出背景图像。
这将是一个定时功能，就像每5秒一次。
我需要使用ASP.NET，Javascript，CSS或者所有这三种方法。
请帮我在这里。谢谢你。
解决方案
答案是：没关系，在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>
在这里找到它。
Cycle，jQuery插件是一种非常灵活的图像旋转解决方案：http://malsup.com/jquery/cycle/
刚刚在...上找到了有关如何使用CSS背景图像和jQuery的教程。
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html
似乎相当深入。打算尝试将其用于我目前正在进行的项目。将报告结果。
编辑1
上面提到的jQuery似乎解决了我的问题，而jQuery Cycle插件无法解决。请查看http://egdata.com/baf/作为示例。主要问题是幻灯片显示包含1500px宽的幻灯片，而页面宽度为960px。
由于某些原因，jQuery Cycle插件在显示当前幻灯片时为宽度添加css样式属性。最初看起来正确，但是在调整浏览器窗口大小时失败。周期似乎是在加载时设置幻灯片的宽度，在我的情况下，我需要将宽度保持为100％，而不是窗口的实际像素宽度。 http://egdata.com/baf/index_cycle.html
