-2

我正在尝试使用 html 和 javascript 在我的网站上创建一个旋转徽标。

我希望它在页面加载时旋转，并随机加载它们。

我试过很多东西！我在谷歌上找到的，我似乎无法让它工作。我试图避免使用 php 来做到这一点。

我希望能够在如下标签中包含随机图像，（如果可能的话）

<img src="" />

所以，简单总结一下。

我想使用“html”和“javascript”来创建一个脚本，每次刷新页面时，它都会从我服务器上的目录中加载一个新徽标。

编辑：我尝试过的

<script type="javascript>
    Array.prototype.random = function () { 
        return this[ parseInt( Math.random() * this.length )  ];
    }

    var myImage=[ 
        "logo1.png",
        "logo1.png",
        "logo1.png",
        "logo1.png"
    ].random()

    document.wite(myImage)
</script>
4

5 回答 5

4

您应该避免使用 document.write。而是id在标签上放置一个属性img，并使用 document.getElementById 检索它。您可以使用 setInterval 方法使其每隔一段时间刷新：

<img id="logo" />
<script type="text/javascript">
var logos = ["logo1.png", "logo2.png", "logo3.png"];
var currentLogoIndex = 0;
function updateLogo() {
    document.getElementById('logo').src = logos[currentLogoIndex];
    currentLogoIndex++;
    currentLogoIndex %= logos.length;
}
window.setInterval(updateLogo, 1000);
updateLogo();
</script>
于 2012-06-29T01:24:09.883 回答
2

您可以将 存储pathes在数组中并使用 random 选择它们index。

$(document).ready(function() {

var src = ['path1.jpg', 'path2.jpg', 'path3.jpg', 'path4.jpg', 'path5.jpg', 'path6.jpg', 'path7.jpg', 'path8.jpg', 'path9.jpg'];

$('img').attr('src', src[Math.floor(Math.random()*10)]) // it returns a number between 0 and 10

});
于 2012-06-29T01:26:01.853 回答
1

你知道，有一个使用 CSS 转换的 jQuery 插件。

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

于 2012-06-29T01:41:52.690 回答
0 
<html>
<body>
<h1>Random logo From List</h1>
<script type="javascript>
    Array.prototype.random = function () { 
        return this[ parseInt( Math.random() * this.length )  ];
    }

    var myImage=[ 
        "logo1.png",
        "logo1.png",
        "logo1.png",
        "logo1.png"
    ].random()

    document.wite("<img src='" + myImage + "' />)
</script>

<h2>Hoo just got a random logo</h2>
</body>
</html>

看起来这是你尝试的：

对于使用 document.write 和 document.getElement 的一些解释：

当您编写像上面这样的内联代码时，您可以使用 document.write，它只会在</h1>正常的“打印”操作之后添加文本。

一旦您在加载文档后使用它，它就会清除所有内容并覆盖整个内容。

如果要在加载后更改文档，则必须编辑 DOM，文档在加载后表示为 DOM。在这种情况下，您应该使用不同的 DOM 操作函数，例如

document.getElementById('logo-image').src = myImage;
于 2012-06-29T02:03:21.690 回答
0

我正在求助于 php 家伙。

<img src="/images/logo/<?php $random = rand(1,3); echo $random; ?>.png" alt="LOGO!!!!" />

完美运行:)

于 2012-06-29T01:53:55.210 回答