当前位置：文江博客话题详情

有什么简单的 JavaScript 或基于 Flash 的工具可以将旋转图像添加到静态网站？

发布于 2024-09-01 08:23:39 字数 207 浏览 3 评论 0原文

我想找到一个免费或廉价的工具，用于将定期更改的图像添加到小型学校的网页中。我正在考虑类似 WordPress 插件 JS Banner Rotate 的东西，但对于静态网站。

有什么建议吗？谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

横笛休吹塞上声 2024-09-08 08:23:40

HTML5 Canvas 无疑是做到这一点的最佳方式。

回复收藏 0 原文

我们的影子 2024-09-08 08:23:39

我构建了这个，它使用多个面板。您可以轻松地将其修改为单个面板或多个面板。

它基本上使用图像和 CSS 背景。它将背景设置为当前图像，然后隐藏、交换和淡入新图像。使用 jQuery 构建。

回复收藏 0 原文

趁年轻赶紧闹 2024-09-08 08:23:39

这应该很简单，不需要任何库或任何东西，只需几行 JavaScript 即可。

假设您的网站上有一个充满图像的目录，您要旋转

/web_root/images/rotate

这些图像，其名称如下：

/web_root/images/rotate/img1.jpg
/web_root/images/rotate/img2.jpg
/web_root/images/rotate/img3.jpg
...

然后，在您的页面上，您有一个要旋转图像的 img 。

<img id="rotator" src="images/rotate/img1.jpg"></img>

然后将 onload 事件添加到您的文档 body 中，就像

<body onload='start_rotate'>...

在中的某个位置定义一个脚本部分，其中包含

var num_of_images = ...;
var timeout = 1000;
function start_rotate() {
    window.setTimeout('rotate()', timeout );
}
function rotate() {
    window.setTimeout('rotate()', timeout );
    var im = document.getElementById('rotator');
    var index = im.src.substring(im.src.indexof('.')-1, 1);
    var next_index = index + 1 % num_of_images;
    im.src = "images/rotate/img" + next_index +".jpg";
}

i 可能有一些语法错误但这应该说明id，只需设置一个超时，每1000毫秒交换一次图像。

祝你好运

this should be pretty easy, no need for any libraries or anything just a few lines of javascript.

lets say on your site you have a directory full of images that you want to rotate

/web_root/images/rotate

with images named like this:

/web_root/images/rotate/img1.jpg
/web_root/images/rotate/img2.jpg
/web_root/images/rotate/img3.jpg
...

Then on your page you have an img that you want to rotate the images through.

<img id="rotator" src="images/rotate/img1.jpg"></img>

then add an onload event to your document body like

<body onload='start_rotate'>...

then somewhere in your <head> define a script section containing

var num_of_images = ...;
var timeout = 1000;
function start_rotate() {
    window.setTimeout('rotate()', timeout );
}
function rotate() {
    window.setTimeout('rotate()', timeout );
    var im = document.getElementById('rotator');
    var index = im.src.substring(im.src.indexof('.')-1, 1);
    var next_index = index + 1 % num_of_images;
    im.src = "images/rotate/img" + next_index +".jpg";
}

i probably have some syntax errors but this should illustrate the id, just set a timeout to swap the image every 1000 milliseconds.

good luck

回复收藏 0 原文

~没有更多了~