var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/style1/index_top_bg3.jpg", "../img/index/bgstyle/style1/index_top_bg1.jpg"];    //(设定想要显示的图片)
var i = 0;
var head=document.getElementsByClassName("div-header")[0];//获取DIV对象
head.style.background="url(../img/index/bgstyle/style1/index_top_bg2.jpg)   center center no-repeat"; //设置图片的初始图片为该路径的图片 如果
function time(){
i++;
i=i%3; // 超过2则取余数,保证循环在0、1、2之间
head.style.background="url("+imgs[i]+")   center center no-repeat";
}
setInterval(time,5000);//循环调用time1()函数,时间间隔为2000ms
//setInterval()函数,按照指定的周期(按毫秒计)来调用函数或表达式
}

js 动态设置 div 背景图片 并滚动显示的更多相关文章

  1. js 定时更改div背景图片

    今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...

  2. 设置div背景图片填满div

    可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...

  3. Js 动态设置DIV日期信息

    HTML代码如下: <div  id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...

  4. 怎么用JQUERY设置div背景图片?

    平常,在css里,我们写成 { background:url(....) ; } 如果需要写脚本, 则 function(){ .....; $(....).css("background- ...

  5. HTML设置body背景图片全屏显示

    在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size ...

  6. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  7. cocos2d(背景图片循环滚动)

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  8. js动态设置padding-top遇到的坑

    我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...

  9. JS实现鼠标移上去图片停止滚动移开恢复滚动效果

    这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...

随机推荐

  1. CSS中的颜色、长度、角度、时间

    一.颜色的表示方法 颜色是通过对红.绿和蓝光的组合来显示的. 1.颜色名 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l ...

  2. Bash技巧:使用 set 内置命令帮助调试 shell 脚本

    Bash技巧:使用 set 内置命令帮助调试 shell 脚本 霜鱼片发布于 2020-02-03   在 bash 中,可以使用 set 内置命令设置和查看 shell 的属性.这些属性会影响 sh ...

  3. 在/etc/profile下配置java的环境变量

    在/etc/profile下配置java的环境变量 原创 Java 作者:xiaoyan5686670 时间:2016-01-18 14:30:28  6152  0 以root用户编辑:#vi /e ...

  4. 关于RabbitMQ的一些问题总结

    消息中间件在工作中一般都不会采用单机模式的,该篇其实是对mq的高可用等等常见问题做一些归纳. 消息队列的高可用 普通集群与镜像集群模式,此处不做深究,另开一篇专门讲述此处 如何保证消息不被重复消费 保 ...

  5. Redis(3)- 数据结构

    一.Redis数据结构 Redis数据结构:Redis在数据类型上常用的有5种数据类型,而底层实现拥有种.可以使用命令OBJECT ENCODING K1查询底层数据结构. # 查询key的底层数据类 ...

  6. Kali Linux 2021.2 发布 (Kaboxer, Kali-Tweaks, Bleeding-Edge & Privileged Ports)

    Kali Linux 简介 Kali Linux 是基于 Debian 的 Linux 发行版,旨在进行高级渗透测试和安全审核.Kali Linux 包含数百种工具,可用于各种信息安全任务,例如渗透测 ...

  7. springboot整合JDBC出现Loading class `com.mysql.jdbc.Driver'. This is deprecated. The new driver class is `com.mysql.cj.jdbc.Driver'.

    今天使用springboot整合JDBC的使用,开始使用的是 com.mysql.jdbc.Driver驱动 结果运行出现此异常 那我们根据提示要求来修改即可 把驱动改成最新的com.mysql.cj ...

  8. leetcode中Java关于Json处理的依赖

    leetcode的java代码提供的main函数中,往往有关于json的依赖...我找了许久才找到他们用的是这个json实现 <dependency> <groupId>com ...

  9. GO学习-(1) why go?

    为什么你应该学习Go语言? 终于等到你!Go语言--让你用写Python代码的开发效率编写C语言代码. 为什么互联网世界需要Go语言 世界上已经有太多太多的编程语言了,为什么又出来一个Go语言? 硬件 ...

  10. 关于Numba的线程实现的说明

    关于Numba的线程实现的说明 由Numbaparallel目标执行的工作由Numba线程层执行.实际上,"线程层"是Numba内置库,可以执行所需的并发执行.在撰写本文时,有三个 ...