變化的背景相似圖片

如果你們看看這個網頁： http://www2.scandvision.se/oresund10/變化的背景相似圖片

他們是如何做到的褪色此背景淡出？當我檢查源這

<img id="wrapper-background" src="images/body-background-0.jpg" alt="Background" />

，我認爲那裏有某種腳本也許PHP或JS，或兩者，即每5秒更改背景：圖像/身體背景1.JPG

圖像/身體背景2.JPG

圖像/身體背景3.JPG

等..

所以他們是怎麼做到的？一個例子會很棒，因爲我想學習如何做到這一點。如果我打算做這樣的事情，我想我只會設法在php中做一個腳本，隨時隨地刷新。

謝謝，這將擴大我的知識

來源

2010-06-15 Karem

他們的Javascript的鏈接是在頁面的底部;就在''標籤之前。（http://www2.scandvision.se/oresund10/javascript/index.js）。圖像改變腳本正好在該文件的底部。 – Matt 2010-06-15 12:48:29

@Matt，爲什麼發表評論。恕我直言，這是一個完全合格的答案。你沒有得到良好評論的聲譽 – jigfox 2010-06-15 12:56:43

他們正在使用mootools框架。檢查了這一點： http://mootools.net/forge/p/slideshow

來源

2010-06-15 12:55:43 Kari

的jquery cycle plugin是一個簡單的腳本來做到這一點的影響。

來源

2010-06-15 12:55:33 Keltex

我認爲你可以有同樣的效果，如果你使用一個叫做「jQuery的innerfade」

這裏是一個網站時，你可以得到它的.js文件，當然是一個jQuery插件你需要jQuery來使用它

Inner Fade

來源

2010-06-15 13:00:24 Dev88

我做了一個時間在網站上，我用「原型JS」和「腳本Aculo美國」，但你可以很容易地做同樣的事情沒有這些庫。你可以在這裏看到一個例子：www.envolulm.fr

我下面提取和翻譯我的代碼的一些評論：

/*在我的html頁面*/

<div id="slideshow"> 
    <p id="text1"><img src="/url/of/your/image1"/></p> 
    <p id="text2"><img src="/url/of/your/image1"/></p> 
    <p id="text3"><img src="/url/of/your/image1"/></p> 
    <p id="text4"><img src="/url/of/your/image1"/></p> 
</div>

CSS：

#text1, #text2, #text3, #text4 { 
    position:absolute; 
    height:402px; // you can put other value...here 
    width:850px; // you can put other value...here 
}

JavaScript函數

function changeimg(){ 

var sec = 6000; // Change each 6 secondes 
var paras = $$('#slideshow p'); // Grab element "<p>" of the div with slideshow for ID 


// For each element "<p>" 
paras.each(function(para){ 
    if(para.visible()){ 
    paraFade = para; // We stock the item which will disappear 
    paraAppear = para.next(); // We got the next element (The one who wants to appear) 

     //If it's the last "p" element we come back to the first one 
     if(paraAppear == undefined){ 
     paraAppear = paras[0]; 
     } 
    } 
}); 
Effect.Appear(paraAppear); // Script Aculo US animation 
Effect.Fade(paraFade); // Script Aculo US animation 
timer = setTimeout("changeimg()",sec); // Timer 

} 

Event.observe(window, 'load', function() { changeimg(); }

希望能幫到你。

來源

2010-06-15 14:43:38 Thierry

變化的背景相似圖片

回答

相關問題