JQuery自动更换背景图

- 日理万妓 2021-07-25 17:06 424阅读 0赞

## JQuery自动更换背景图 ##

![在这里插入图片描述][2020102620010546.gif_pic_center]  
思路：给一个div存放图片设置大小及背景图，将图片名称设置成连续的数字（等）格式，设置定时器，当i=1时，5s后，i=2，5s后i=3，5s后i=1，以达到循环更换的目的（超简单的是吧）

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>更换背景图</title>
      <style> #box { width: 600px; height: 350px; margin: 100px auto; position: relative; background-image: url("./img/1.jpg"); /* background: no-repeat; */ background-position: center; background-size: cover; border: 1px solid #ccc; overflow: hidden; transition: 0.5s linear; } .bo { width: 100px; height: 100px; background-color: skyblue; } </style>
      <script src="https:/apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    
    <body>
      <div id="box"></div>
      <script> $(document).ready(function () { var i = 1; setInterval(function () { if (i == 1) { i = 2; } else if (i == 2) { i = 3; } else { i = 1 } $('#box').css({ "background-image": "url(./img/" + i + ".jpg)" }); }, 5000); }); </script>
    </body>
    
    </html>

[2020102620010546.gif_pic_center]: /images/20210725/3c716909e7c84ed69813bc5e1bafceea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 html设置背景图大小，自动拉伸背景图

html设置背景图 background-image: url(./img/img\_accident\_report.png); 设置背景图大小，自动拉伸背景图

阳光穿透心脏的1/2处/ 2024年02月21日 11:31/ 0 赞/ 79 阅读

相关如何给typora更换主题背景

文章目录前言详细步骤第一步：官网下载主题第二步：typora 设置主题步骤三：重启 typora 并选择新主

向右看齐/ 2023年02月14日 05:41/ 0 赞/ 10 阅读

相关 linux 壁纸自动更换,linux设置自动更换壁纸

linuxmint 17没有vim 首先上软件管理器中安装vim,之后配置.vimrc文件下面是从网上摘抄的配置文件: """""""""&qu ... NPOI读写Ex

逃离我推掉我的手/ 2023年01月21日 02:15/ 0 赞/ 37 阅读

相关 FinalShell更换背景颜色

1. 打开FinalShell点击右上角多功能按键，点击选项 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

墨蓝/ 2022年12月20日 08:54/ 0 赞/ 856 阅读

相关鼠标事件之简单轮播更换背景图实

简单轮播图案例：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

缺乏、安全感/ 2022年12月19日 09:29/ 0 赞/ 128 阅读

相关 photoshop实现图片更换背景

闲着没事拿着自己的图p了一下，想换一个高大上的北京，哈哈，结果还是不错的，分享一下我换背景的经历，另外照片白底换成蓝底也是类似的，新手完全可以做到的。 1.首先安装ps软件

柔光的暖阳◎/ 2022年07月24日 12:03/ 0 赞/ 317 阅读

相关 gitbook小插件:给书自动更换背景图片

突发兴趣给gitbook开发了一款可以自动更换背景图片的小插件这样看书的时候也不疲劳了. 哈哈, 图片可以自定义, 自动切换时间也可以自定义. 地址: [https

傷城~/ 2022年05月30日 11:48/ 0 赞/ 354 阅读

相关 idea 更换编辑器背景图片

1、打开File \-> Setting \-> Plugs -> 搜索BackgroundImage。然后安装。如图 ![806341-20170526205126654

墨蓝/ 2022年04月18日 04:52/ 0 赞/ 373 阅读

相关 VSCode更换背景主题快捷键

vscode 默认是有好几种主题的，有颜色较深的，也有比较柔和的；我们可以使用快捷键来快速的选择更换主题；首先：按下 Ctrl + k 然后再按下：Ctrl +

约定不等于承诺〃/ 2022年02月23日 05:18/ 0 赞/ 571 阅读

相关 JQuery自动更换背景图

JQuery自动更换背景图 ![在这里插入图片描述][2020102620010546.gif_pic_center] 思路：给一个div存放图片设置大小及背景图，将

- 日理万妓/ 2021年07月25日 17:06/ 0 赞/ 425 阅读