简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

js实现网页随机切换背景图片的方法_javascript技巧

WBOY
Release： 2016-05-16 16:32:20
Original
2226 people have browsed it

本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下：

首先要准备一些图像，图像的大小（无论是尺寸大小还是数据大小）要控制好，如果太大，会使用户等不及查看全图就跳出了，如果太小，又会影响页面质量

在script中将这些图像编为一个数组，便于调用。数组的长度当然就是图像的数量。

复制代码 代码如下:
var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "images/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";

因为上面用到了5个图像，所以在这里需要产生一个0到4的随机数。如果数组长度不一样，修改下面代码中的乘数就可以。

复制代码 代码如下:
var randomBgIndex = Math.round( Math.random() * 4 );

核心的程序就是这些。尽管很简单，却是一种小小的思路，若以此为基础，通过加工可以做出一些扩展功能。比如：主题切换以及其它的随机呈现等等。下面是完整的JS代码。

复制代码 代码如下:

希望本文所述对大家基于javascript的web程序设计有所帮助。

Related labels：
js switch picture Web page background random
source：php.cn
Previous article：jQuery修改li下的样式以及li下的img的src的值的方法_jquery Next article：jQuery中ajax和post处理json的不同示例对比_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to use open primitive tag in next js 13? In the recent NextJS13 update, they introduced a new way of handling meta tags that differ...
From 2023-11-10 23:03:51
0
1
527
Livewire undefined I'm having trouble deploying my LaravelLivewire project to the server. The problem is that...
From 2023-11-09 15:34:23
0
1
233
Vue js: Troubleshooting - Reading '$refs' property of undefined Getting the error Cannot read property of undefined (reading '$refs') even though I have a...
From 2023-11-07 23:34:12
0
1
305
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
Unexpected behavior (white button bug) when using Tailwind and MUI in NextJS project I'm currently building a project using NextJS, TailwindCSS and the MUIReactUI library. Whe...
From 2023-11-04 11:04:23
0
1
178
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！