Question

我试图使用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>

Answer 1

您应该避免使用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>

Answer 2

您可以将pathes存储在数组中，然后使用随机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

});

Answer 3

你知道，有一个jQuery插件可以利用CSS转换。

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

Answer 4

我正在寻找php家伙。

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

完美无缺：）

Answer 5

<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;

在html / javascript中旋转徽标

5 个答案: