logo标签列表

如何使用JavaScript/ASP.NET/CSS旋转并淡入淡出背景图片

asp.netjavascriptcssimage-manipulation
4

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

这将是一个定时函数，比如每5秒钟一次。
我需要用ASP.NET、Javascript、CSS或者三者结合来完成。

请帮帮我，谢谢。

3个回答
5
2
这是答案：不用担心，大家放心。在谷歌上进行更精确的搜索后，我找到了一个好的解决方案。
<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>

在这里找到它：{{link1}}。
0

刚刚发现了一个使用CSS背景图片和jQuery的教程，网址是http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html。

看起来非常深入。我打算尝试在我目前正在进行的项目中使用它。之后会报告结果。

编辑1

上述提到的jQuery似乎解决了我的问题，而jQuery Cycle插件则无法解决。请参考http://egdata.com/baf/以获取示例。主要问题是幻灯片包含的幻灯片宽度为1500像素，而页面宽度为960像素。

由于某种原因，jQuery Cycle插件在显示当前幻灯片时会添加一个CSS样式属性来设置宽度。最初看起来是正确的，但当浏览器窗口大小调整时就会出现问题。Cycle似乎在加载时设置幻灯片的宽度，在我的情况下，我需要宽度保持100％而不是实际窗口像素宽度。http://egdata.com/baf/index_cycle.html
两年多过去了... :) 我个人推荐jQuery Tools: http://flowplayer.org/tools/tabs/slideshow.html - Nelson Rothermel
我的具体情况与标准的jQuery幻灯片设置不兼容，它定义了内联图像。由于幻灯片图片比内容宽度大（没有水平滚动条），我需要将这些图片定义为CSS background-image属性。这可以弥补超过960像素页面宽度的渐变。等准备好了，明天我会分享一个例子。 - Eddie
jQuery Tools幻灯片通常使用div作为选项卡内容（但可以是您指定的任何HTML元素）。您可以随意设置background-image。 - Nelson Rothermel
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接