0

http://jsfiddle.net/MAaVV/

以上是我的代码的 JSFiddle。使图像全屏显示是一些 CSS，然后对图像进行简单的 src 更改。我想每 5 秒更改一次图像背景。它也在下面：

<STYLE type=text/css>
#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
</style>

<script type="text/javascript">

for(var x = 0; x < 2; x++)
{
    setTimeout(function()
    {
        var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];
        document.getElementById("img").src = imgs[x];
    },5000);
}
</script>

<div id="bg">
  <img id="img" src="http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg?w=919&h=613" alt="" />
</div>

有谁知道为什么它不起作用？

在幻灯片的最后一张图片显示 5 秒后，构建重定向（到另一个网站）的奖励积分。

4

3 回答 3

1

试试这个：

var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg", "http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg"]; 
var i=0;
setInterval(function () {        
    document.getElementById("img").src = imgs[i];
    if(i==1)
    {
        //alert('test');
        $("#img").click(function(){
            alert('on');
            location.href='http://www.google.com';
        });
    }
    if(i++>=1) i=0;   
}, 5000);

小提琴：http: //jsfiddle.net/MAaVV/6/

于 2013-03-12T06:53:49.577 回答
1

您的代码失败有两个原因：

  1. 您将所有三个（或在 jsFiddle 的情况下为两个）超时设置为同时运行。您的代码将所有三个设置为在调用后 5 秒运行，但所有调用都是同时进行的，因此它们都将在 5 秒后运行。
  2. 您在超时函数中使用该x变量，但未在该函数的范围内定义它。因此，在所有情况下，图像都“未定义”为 src。

为了解决这个问题，我会使用这样的东西：

<script type="text/javascript">
var imageIndex = 0;
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];


setInterval(function(){
    document.getElementById("img").src = imgs[imageIndex++];
    if(imageIndex >= imgs.length) imageIndex = 0;
    },5000);
</script>

http://jsfiddle.net/MAaVV/5/

编辑：要在所有幻灯片显示后使函数执行某些操作，您可以尝试以下操作：

<script type="text/javascript">
var imageIndex = 0;
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg","http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg","clf.jpg"];

var interval = setInterval(function(){
    document.getElementById("img").src = imgs[imageIndex++];
    if(imageIndex >= imgs.length){
        clearInterval(interval);
        setTimeout(function(){
            // do whatever you want here, after a 5 second pause
        },5000);
},5000);
</script>
于 2013-03-12T06:59:46.460 回答
0 
var imgs = ["http://www.hdwallpapers.in/walls/aprilia_rsv4_motorcycles-wide.jpg", "http://chivethethrottle.files.wordpress.com/2012/12/user-girl-motorcycle-920-3.jpg"];   

var currentImage = 1;

$(document).ready(function(){
    setInterval(function(){
        if (currentImage >= imgs.length)
        {
            currentImage = 0;
            window.location.href = 'http://www.google.com';
        }
        else
        {
            currentImage++;
        }

        $("#bg #img").attr("src", imgs[currentImage]);
    }, 5000);
});

http://jsfiddle.net/MAaVV/2/

于 2013-03-12T06:49:06.087 回答