Question

如果你们查看这个网页： 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中做一个每次刷新时随机化的脚本。

谢谢，这将扩展我的知识

Answer 1

我曾经在网站上做过一次，我使用“Prototype JS”和“Script Aculo US”，但是如果没有这些库，你可以很容易地做同样的事情。你可以在这里看到一个例子：www.envolulm.fr

我在下面提取并翻译我的代码的一些评论：

/ *在我的HTML PAGE * /

中

 <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(); }

希望能帮到你。

Answer 2

他们正在使用mootools框架。看一下这个： http://mootools.net/forge/p/slideshow

Answer 3

jquery cycle plugin是一个执行此效果的简单脚本。

Answer 4

如果您使用名为“jquery innerfade”的jquery插件，我认为您可以获得相同的效果

这是一个网站，当你可以得到它的.js文件，当然你需要jquery来使用它

Inner Fade

像这样改变背景图像

4 个答案: