js 点击切换背景图片

王元祺

于 2023-02-15 18:12:42 发布

阅读量1.7k

点赞数 1

文章标签： javascript 前端 html 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_35757191/article/details/129564700

版权

您好，要使用JavaScript实现点击切换背景图片，可以按照以下步骤进行：

在HTML中，为需要切换背景图片的元素添加一个id属性，比如id="bg-img"。
在JavaScript中，使用document.getElementById()方法获取该元素。
定义一个数组，里面存放需要切换的背景图片的URL地址。
使用addEventListener()方法为元素添加一个点击事件，当用户点击该元素时触发。
在点击事件中，使用Math.random()方法随机生成一个索引值，然后使用style.backgroundImage属性将元素的背景图片设置为数组中对应索引的图片URL地址。

以下是代码示例：

HTML:

<div id="bg-img">点击我切换背景图片</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

王元祺

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js页面交互----背景图片交换

m4587的博客

08-22

510

实现点击按钮切换背景图并显示当前页面索引，当显示为最后一张图片时，点击下一张返回到第一张图片。

JS点击切换背景

qq_52006379的博客

08-26

361

JS点击切换背景。

参与评论您还未登录，请先登录后发表或查看评论

javascript实现首页图片自动切换【HTML/JSP】

红苹果乐园

04-20

5394

现在访问网站主页的时候，吸引我们眼球的已经不是那些古板的文字排版，而是华丽且实用的动图效果，如下图所示：通过动图，我们可以看到本站的最新活动，最新新闻等等，这些图片往往几秒钟切换一次，显示更新，点击图片即可看到详细内容。我们在做网页设计的时候，也可以拿来借鉴。下面介绍一下效果的实现：javascript 。我

JavaScript点击背景图片切换

weixin_67107650的博客

03-28

5381

本文献这次讲的是JavaScript背景图片切换，这次案列会用一个事件委派属性。 1.首先可以先给主页界面放一张图片，让打开网页就显示到一张图片出来，这里我放的是下面第三张图片。 2.然后把html的div图片框架打出来，一个div标签里面包裹了四个img标签，给div一个id，下面获取id的时候需要。 3.再给四个img标签打一下样式，能把效果显示的好看一点。 4.开始获取前面的id，先写一个window.onload页面加载事件，然后里面获取一下...

前端百度换肤案例

weixin_46002223的博客

08-28

621

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .

利用JS切换背景图

weixin_33694172的博客

04-18

1502

2019独角兽企业重金招聘Python工程师标准>>> ...

js点击图片切换背景

weixin_58414196的博客

12-21

995

【代码】js点击图片切换背景。

js实现点击切换checkbox背景图片的简单实例

10-19

最后，通过JavaScript来实现点击复选框时切换背景图片的功能。由于jQuery 1.9版本之后不再支持`.toggle()`方法，因此需要使用原生JavaScript进行操作。在此例中，定义了一个名为`toggle`的函数，用于在元素的显示和...

jQuery点击切换背景图片代码

06-01

本示例中，我们将深入探讨如何使用jQuery实现一个简单的功能：点击切换背景图片。这个功能常用于网站交互设计，提升用户体验。首先，我们需要在HTML页面中设置一个触发点击事件的元素，例如一个按钮或一个链接，...

js 转盘(切换背景图片)

04-11

NULL 博文链接：https://dongbiying.iteye.com/blog/1680266

JavaScript实现更换背景图片

12-13

本文实例为大家分享了JavaScript实现更换背景图片的具体代码，供大家参考，具体内容如下主要通过Js控制行内样式，达到更换背景图片的目的效果：代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>更换背景</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: url(./images/01.jpg) no-repeat; background-size: 60

js实现点击图片改变页面背景图的方法

01-21

点击图片即改变页面的背景图片</title> </head> <body bgcolor=”#FFFFFF” leftmargin=”0″ marginwidth=”0″> [removed] <!– function tile(){ if (!document.all) return var source=...

纯js实现背景图片切换

weixin_34007906的博客

11-14

410

js切换背景

qq_62336903的博客

04-05

399

我们通过获取所有的img元素，在给每个img元素添加一个点击事件，最后通过点击img标签将 img标签的src送给body的背景。 js部分 var img = document.querySelectorAll('img'); for (var i = 0; i < img.length; i++) { img[i].onclick = function() { document.body.style.backgro

vue小笔记

weixin_50680057的博客

10-23

175

Document

Js实现背景图片切换

wuliao193728645的博客

04-10

6745

实现目标：点击页面中间的小图片，页面的背景就会变成相应的图片样式思路点击图片，获取到对应的图片的li元素因为图片的名字是从1开始顺序命名的，所以可以通过获取的li元素的索引号来改变背景图片的地址名将地址名改到body标签的backgroundImage属性中实现代码 html代码 Css代码 Js代码 ...

js更换背景图

Protagonist

06-21

1285

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

html背景图片变换

最新发布

07-28

在HTML中更换或添加网站背景图片可以通过CSS来实现。你可以在网页的CSS样式表中找到背景图的代码段，然后替换其中的图片路径即可。具体的代码示例如下： ```css body { background-image: url(图片地址); background-repeat: no-repeat; background-attachment: fixed; } ``` 上述代码中，`background-image`属性指定了背景图片的路径，`background-repeat`属性设置了背景图片不重复显示，`background-attachment`属性设置了背景图片固定不随页面滚动。如果你想要实现背景图片的变换效果，可以使用JavaScript来实现。你可以在JavaScript代码中获取到需要设置背景图片的元素，然后通过修改其`style.backgroundImage`属性来更换背景图片。具体的代码示例如下： ```javascript // 获取需要设置背景图片的元素 var obj = document.getElementById("elementId"); // 定义一个图片数组，存储多个背景图片的路径 var arr = \["图片1地址", "图片2地址", "图片3地址"\]; // 定义一个变量curIndex，表示当前显示的图片索引 var curIndex = 0; // 切换背景图片的函数 function changeBackground() { // 判断当前索引是否达到数组末尾，如果是则重置为0，否则加1 if (curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } // 设置背景图片 obj.style.backgroundImage = "url(" + arr\[curIndex\] + ")"; } // 调用切换背景图片的函数 changeBackground(); ``` 上述代码中，`obj`表示需要设置背景图片的元素，可以通过其id来获取。`arr`是一个存储多个背景图片路径的数组。`curIndex`表示当前显示的图片索引，初始值为0。`changeBackground`函数用于切换背景图片，通过修改`obj.style.backgroundImage`属性来实现。你可以根据需要修改数组中的图片路径和元素的id来适应你的网页。希望以上信息对你有所帮助！ #### 引用[.reference_title] - *1* [如何实现在HTML中更换或添加网站背景图片](https://blog.csdn.net/weixin_35455673/article/details/117709888)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [HTML中如何自动切换页面背景图片](https://blog.csdn.net/qq_34129336/article/details/77581410)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]