变化的背景相似图片

如果你们看看这个网页： 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

变化的背景相似图片

回答

相关问题