简洁风个人主页（3） js背景图片随机切换

静态页面做完了，现在用js做一个背景图片随机切换的效果。

1.点击‘个人网站'这个字样，实现body背景的切换。所以，首先获取这两个节点。

var body = document.body;
var change_btn = document.getElementById("change_btn");

2.添加change_btn的onclick点击事件，在点击事件中写获取随机图片路径的方法image_url( ),代码解释见注释

change_btn.onclick = function(){var image_url = function(){//获取随机图片的路径方法var image_path = "img/images/";//定义背景图片的路径常量部分；var image_index =parseInt(Math.floor(Math.random()*75));//用random函数获取范围在0-75的随机数字并向下取整//转化成int数值类型return image_path+image_index+'.jpg';//利用字符串拼接返回图片路径};

完整js代码：

window.onload = function(){var body = document.body;var change_btn = document.getElementById("change_btn");change_btn.onclick = function(){var image_url = function(){//获取随机图片的路径方法var image_path = "img/images/";//定义背景图片的路径常量部分；var image_index =parseInt(Math.floor(Math.random()*75));//用random函数获取范围在0-75的随机数字并向下取整//转化成int数值类型return image_path+image_index+'.jpg';//利用字符串拼接返回图片路径};body.style.background = 'url('+image_url()+')';};
}

注意：

1.随机图片是根据随机产生的数字来查找对应的图片路径。所以，图片以 数字+图片 格式命名。

2.常规访问图片用相对路径，js是外联文件，与图片不在同级目录中，需要在img文件夹前加 '../'。其实，js在查找图片时是根据包来查找的，加上‘../’反而不能正常显示图片。这点很重要。

css与js引用图片的路径问题参考文章：点击打开链接

简洁风个人主页（3） js背景图片随机切换相关推荐

html怎么用小小的图片铺满作为背景,多种背景图片随机切换的应用
在皮肤『QQ Style』中我使用了随机背景切换功能,这个随机背景切换是一个独立的功能,上面使用的只是其中一小部分应用.下面我将演示背景随机切换的更多应用,然后大家就可以有更多的拓展. 第一:背景图片 ...
three.js 背景图片
three.js 背景图片单张图片 const loader1 = new THREE.TextureLoader(); const bgTexture = loader1.load('static ...
CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
jq实现背景图片动态切换
在很多需求中都用到了利用jquery实现背景图片的动画效果,接下来我们将实现点击ul中的li实现背景图片的动态切换. 思路和实现步骤: 1.先建立静态页面.其中box盒子用来动态生成ul,li,a和i ...
html5 背景图片自动换,网站背景图片自动切换特效css代码
背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...
html5轮播怎么自动换图,js实现轮播图效果纯js实现图片自动切换
本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: ...
jquery实现图片随机切换、抽奖功能
jquery实现图片随机切换.抽奖功能效果图: 源代码: HTML: <body> <div id="div1">&l ...
简洁风个人主页（1） html 静态布局
最近做了一个简洁风个人网站主页,和大家分享一下.界面如图,(换了两张背景图片): 一.界面:背景为一组自定义图片,中间一个透明标签,标签内包含header,content,footer三部分: 二.基 ...
随机背景图php,岁月小筑随机图片API接口-随机背景图片-随机图片API
前言此为完整版随机图片API介绍,若仅需要随机背景图片,请点击: 接口调用地址 1 2 3 4 5 #https调用 https://img.xjh.me/random_img.php #http调 ...

简洁风个人主页（3） js背景图片随机切换

简洁风个人主页（3） js背景图片随机切换相关推荐

最新文章

热门文章