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. MergingSort

    递归排序的两种实现 <script type="text/javascript"> //归并排序(递归实现) //思想:堆排序利用了完全二叉树的性质,但是比较麻烦 // ...

  2. netperf对比

    netperf -H 10.1.60.141 -t TCP_STREAM -l 60  -p 10082 netperf -H 10.1.60.141 -t UDP_STREAM -l 60  -p ...

  3. sosreport命令 然后diff 正常的操作系统例如centos

    nux学习笔记:有用的linux命令  发表于 2018-06-25 |  分类于 linux|  字数统计: 1,269 |  阅读时长 ≈ 6 写在前面 这着笔记,整理一些网上搜集到有用的linu ...

  4. C++知识点案例 笔记-5

    1.关系运算符重载 2.类型转换函数重载 3.转换构造函数 4.函数模板 5.显式实例化 6.类模板外定义模板函数 1.关系运算符重载 ==关系运算符重载== //直接(按分数)比较两个对象 #inc ...

  5. linux 服务开机自启动systemd方式 (Centos7)

    linux 服务开机自启动systemd方式 (Centos7) 1.编写一个 /opt/hello.sh 脚本 [root@jws-ftp prometheus]# cat /opt/hello.s ...

  6. 11.19 rpm:RPM包管理器

    rpm命令的全称是Red Hat Package Manager(Red Hat包管理器),几乎所有的Linux发行版本都使用了这种形式的命令管理.安装.更新和卸载软件. 概括地说,rpm命令包含了五 ...

  7. IDEA 创建 Vue 文件(Day_41)

    IDEA 创建 Vue 文件 1. 在setting-->plugins里安装vue插件,安装成功之后重启IDEA 如图 2. 在setting-->Editor-->File Ty ...

  8. 达梦数据库产品支持技术学习分享_Week1

    本周主要从以下几个方面进行本人对达梦数据库学习的分享,学习进度和学习情况因人而异,仅供参考. 一.达梦数据库的体系架构 二.达梦数据库的安装 三.达梦数据库的数据类型 四.达梦数据库的DDL.DML. ...

  9. Docker学习(4) 守护式容器

    守护式容器 stop - 等待信号 kill - 直接干死

  10. 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)

    0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...