在 html/javascript 中旋转徽标

Rotating logo in html/javascript

本文关键字：旋转 javascript html      更新时间：2023-09-26

im 尝试使用 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>

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

您可以将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
});

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

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

我正在求助于php家伙。 

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

完美:)

<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;
相关文章：