如何使用javascript/ASP.NET/CSS旋轉和淡入淡出背景圖像

我需要隨意淡入和淡出背景圖像。如何使用javascript/ASP.NET/CSS旋轉和淡入淡出背景圖像

這將是一個定時功能，如每5秒一次。
我需要用ASP.NET，Javascript，CSS或全部三種方式來完成。

請幫我在這裏傢伙。謝謝。

來源

2008-09-28 SpoiledTechie.com

週期，一個jQuery插件是一個非常靈活的圖像旋轉的解決方案：http://malsup.com/jquery/cycle/

來源

2008-09-28 20:48:36

這就是答案：在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。

來源

2008-09-28 16:12:24

剛剛找到如何與CSS背景圖像和jQuery在做這個教程...
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

似乎相當深入。將嘗試將其用於我目前正在進行的項目。將報告如何結果。

編輯1

上面提到的jQuery似乎已經解決了我的問題，即jQuery的週期插件不能。以http://egdata.com/baf/爲例。主要問題是幻燈片包含寬度爲1500px，幻燈片寬度爲960px的幻燈片。

由於某些原因，jQuery Cycle插件在顯示當前幻燈片時爲寬度添加了css樣式屬性。最初它看起來正確，但在瀏覽器窗口調整大小時失敗。 Cycle似乎設置了加載時幻燈片的寬度，在我的情況下，我需要寬度保持100％，而不是窗口的實際像素寬度。 http://egdata.com/baf/index_cycle.html

來源

2010-12-01 17:59:58 Eddie

超過兩年後... :)我個人推薦jQuery工具：http://flowplayer.org/tools/tabs/slideshow.html – 2010-12-01 18:07:58

如何使用javascript/ASP.NET/CSS旋轉和淡入淡出背景圖像

回答

相關問題