if循环 切换背景图片

最新推荐文章于 2024-06-27 12:49:37 发布
最新推荐文章于 2024-06-27 12:49:37 发布
阅读量395 收藏
点赞数
文章标签： css javascript html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46408680/article/details/113813393
版权
本文介绍了如何利用if循环在HTML、CSS和JavaScript中实现背景图片的切换效果。展示了HTML结构、简洁的CSS样式以及相对复杂的jQuery代码。作者鼓励读者在评论区分享更简洁的JavaScript实现方式。
摘要由CSDN通过智能技术生成

大家新年好！今天跟大家分享一个if循环的切换背景图片的一个效果。

首先看看页面效果：

 

 

 

这是HTML代码：

很简单就只有一个div包裹着四个img

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>背景图片的切换</title>

    <link rel="stylesheet" href="style.css">

</head>

      

<body>

    <div class="top_c">

        <img src="images/1.jpg" alt="" class="p">

        <img src="images/2.jpg" alt="" class="p1">

        <img src="images/3.jpg" alt="" class="p2">

        <img src="images/5.jpg" alt="" class="p3">

    </div>

    <script src="j
最低0.47元/天 解锁文章
暴走☆苍穹
关注
Java for循环和If语句实战--几个有趣的图案分享
weixin_56265657的博客
03-30 454
在学习编程语言时，需要做大量的练习以掌握某个知识点，以下分享几个简单的图形及实现代码，供Java初学者练习掌握for循环的使用，交流经验。 实现代码： public class Graph { public static void main(String[] args){ //图案一 System.out.println("图案一：三角图案"); for(int i=0;i<5;i++){ for(int j=0;j&lt
JavaScript if判断切换图片
从盲流子到程序员
12-26 1103
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;/head&gt; &lt;
JavaScript的学习之图片的切换
最新发布
人生苦短
06-27 928
这节的JS图片切换的学习就告一段落！添加JS代码，让它实现图片切换的功能。点击按钮可以切换上一张和下一张。随便去网上找几张图片素材。
图片循环切换播放
qq_35741728的博客
04-26 711
轮播图片效果序言：写网页的时候会遇到很多需要轮播图的效果，不难，引用个插件就好了吗，简单方便，但是看到人家写出来的循环切换效果就想自己也琢磨琢磨是否能实现，那现在既然在这写了这篇文章，那肯定是实现了呀，虽然距离插件的效果还有一定距离，但是功能都实现了，也只是给大家提供个思路。我用的是面向过程的方式写的，基于jquery.我先放一下我的结构代码：<body> <div class="box">
JavaScript点击背景图片切换
weixin_67107650的博客
03-28 5299
本文献这次讲的是JavaScript背景图片切换，这次案列会用一个事件委派属性。 1.首先可以先给主页界面放一张图片，让打开网页就显示到一张图片出来，这里我放的是下面第三张图片。 2.然后把html的div图片框架打出来，一个div标签里面包裹了四个img标签，给div一个id，下面获取id的时候需要。 3.再给四个img标签打一下样式，能把效果显示的好看一点。 4.开始获取前面的id，先写一个window.onload页面加载事件，然后里面获取一下...
前端百度换肤案例
weixin_46002223的博客
08-28 584
<!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实现的图片选择顺序切换和循环切换功能示例【测试可用】
10-17
根据给定的文件信息，可以整理出以下知识点： ...通过上述知识的详细解释，可以了解到如何利用JavaScript实现图片的顺序切换和循环切换功能，并且结合了具体的实例代码和样式设计来完成一个图片切换效果的网页。
JS背景图片切换
Harlynn_的博客
10-14 3195
Js实现背景图片切换（单线程问题） 实现目标： 点击页面中间的小图片，页面的背景就会变成相应的图片样式 思路 点击图片，获取到对应的图片的li元素 因为图片的名字是从1开始顺序命名的，所以可以通过获取的li元素的索引号来改变背景图片的地址名 将地址名改到body标签的backgroundImage属性中 实现代码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&
网页背景图片自动切换
08-10
网页背景图片自动切换是一种常见的网页动态效果，它可以提升用户体验，为网站增添视觉吸引力。这个功能主要依赖于JavaScript（JS）语言来实现，因为HTML和CSS本身并不具备定时执行任务的能力。接下来，我们将深入...
jQuery鼠标经过图片背景滑动切换效果特效代码
03-20
在上述代码中，`slide-container`元素现在存储了一个包含所有图片URL的数组，`mouseenter`事件启动定时器以每3秒切换一次背景图片，而`mouseleave`事件则清除定时器以停止切换。 总之，通过jQuery库，我们可以轻松...
JavaScript实现点击图片换背景
01-21
JS制作网页–点击图片换背景，供大家参考，具体内容如下 网页中有四个图片，点击不同的图片，更换相对应的背景。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>背景</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } li { list-style:
js实现点击图片改变页面背景图的方法
10-24
主要介绍了js实现点击图片改变页面背景图的方法,实例分析了javascript操作css与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
纯js实现背景图片切换效果代码
10-28
现在纯粹用js的人越来越少了，更多的人喜欢jquery，可使我还是喜欢javascript，下面给出一个用javascript写的背景切换的小例子，各位大虾不要骂，只是写给自己看的，也供js事件的产考依据。
JS动态修改网页body的背景色实例代码
11-28
大部分网页默认的背景色为白色，个人感觉比较刺眼，于是写了个JS的脚本去改变body部分的背景色，代码如下： // ==UserScript== // @name ChangeBackgroundColor // @namespace tingl // @include * // @version 1 // @grant none // ==/UserScript== (function () { 'use strict'; var color = '#ececec'; var style; function createStyle() { style = d
js if 图片切换
qq_36270681的博客
02-19 338
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img id="image" src="img/d7d8dfb9137fe798f92cb3b2f227063.jpg" alt=""> <button type="button".
javascript:点击小图片切换背景图片
果冻
05-05 1709
屏幕部分图片，点击中间的小图片，会变换背景图片 html布局代码： <ul class="box"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""></li> <li><img src="images/3.jpg" alt=""&g.
js制作九九乘法表
任聪聪的博客
10-28 682
Document for(var a= 1; a < 10; a++){ for(var b = 1; b <=a; b++ ){ var c = a *b ; document.write(b,"*",a,"=",c," "); } document.write("") }
js实现点击切换checkbox背景图片
weixin_30855761的博客
05-07 422
在制作网页的过程中，经常需要实现点击切换背景图片的效果，本文关注的是表单中checkbox背景图片切换的实现。如图，在输入用户名和密码后，用户需要选择是否记住密码 图片背景为白色表示未勾选状态，背景为蓝色表示勾选状态。 HTML源码如下： 1 <div class="check"> 2 <input id="checkbox1" class...
js 点击切换背景图片
08-28
6. 在切换完背景图片后，更新当前显示的背景图片的索引，可以使用取余数的方式，实现循环切换背景图片。 7. 最后，执行以上步骤后，即可实现点击切换背景图片的功能。 示例代码如下： ```javascript // HTML: 点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

暴走☆苍穹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值