Question

var sponsor = 1;

function goBanner() {
  if (sponsor == 1) {
    window.location.href = "http://www.pavucina.sk";
  }
  if (sponsor == 2) {
    window.location.href = "http://forum.sk";
  }
  if (sponsor == 3) {
    window.location.href = "http://superzoznam.sk";
  }
}

function rotate() {
  if (++sponsor > 3) sponsor = 1;
  document.images[0].src = "" + sponsor + ".jpg"
  window.setTimeout('rotate();', 5000);
}

<a href="javascript:goBanner();"><img class="slikaF" name="banner" src="1.png" border=0></a>

我需要专门使用此代码，但我不理解为什么横幅不起作用。标语中的链接有效，但图像“动画”无效。请帮助

Answer 1

您永远不会调用rotate函数。与其在函数内部使用setTimeout来保持自身重新调用（无需先调用它来启动该过程），而是从函数外部调用一次setInterval。像这样：

function rotate() {
  if (++sponsor > 3) sponsor = 1;
  document.images[0].src = "" + sponsor + ".jpg"
}

window.setInterval(rotate, 5000);

这将每隔5秒重复调用rotate函数。

例如：

var sponsor = 1;

function goBanner() {
  if (sponsor == 1) {
    window.location.href = "http://www.pavucina.sk";
  }
  if (sponsor == 2) {
    window.location.href = "http://forum.sk";
  }
  if (sponsor == 3) {
    window.location.href = "http://superzoznam.sk";
  }
}

function rotate() {
  if (++sponsor > 3) sponsor = 1;
  document.images[0].src = "" + sponsor + ".jpg"
}

window.setInterval(rotate, 5000);

<a href="javascript:goBanner();"><img class="slikaF" name="banner" src="1.png" border=0></a>

Answer 2

您没有调用rotate函数。

您必须从函数中删除timeOut并将其分开保存。

function rotate() {
  if (++sponsor > 3) sponsor = 1;
  document.images[0].src = "" + sponsor + ".jpg"
}

window.setInterval(rotate, 5000);

现在，rotate函数仅计算sponsor变量并更改图像的src。我们正在通过setInterval调用该函数：它将初始化并每5秒执行下一次调用。

检查下面的小提琴：

var sponsor = 1;

function goBanner() {
  if (sponsor == 1) {
    window.location.href = "http://www.pavucina.sk";
  }
  if (sponsor == 2) {
    window.location.href = "http://forum.sk";
  }
  if (sponsor == 3) {
    window.location.href = "http://superzoznam.sk";
  }
}

function rotate() {
  if (++sponsor > 3) sponsor = 1;
  document.images[0].src = sponsor + ".jpg";
  document.images[0].title = "Image " + sponsor;
}

window.setInterval(rotate, 3000);

<html>
<head>
  <title>Banner</title>
</head>
<body>

<a href="javascript:goBanner();"><img class="slikaF" name="banner" src="1.jpg" title="Image 1" border="0"></a>

</body>
</html>

Ps：为图像添加了title属性，因为我们没有在此处显示原始文件，因此可能很难看到过渡。

希望对您有帮助。

JS中的横幅，“动画”部分不起作用？

2 个答案: