js 动态设置 div 背景图片 并滚动显示
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 背景图片 并滚动显示的更多相关文章
- js 定时更改div背景图片
今天遇到一个业务场景,使用js将一个div标签的背景图片定时更换一下. 之前百度了几个,有css+js,也有css3的,不过css3的兼容有问题,之后同事提示,可以使用js直接来更换div的北京图片, ...
- 设置div背景图片填满div
可以设置div的样式为 background:url('+UPLOAD_PATH+data.url+') no-repeat; background-size: 100%;width:100%;hei ...
- Js 动态设置DIV日期信息
HTML代码如下: <div id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...
- 怎么用JQUERY设置div背景图片?
平常,在css里,我们写成 { background:url(....) ; } 如果需要写脚本, 则 function(){ .....; $(....).css("background- ...
- HTML设置body背景图片全屏显示
在head标签中添加body属性设置: <head><style>body{background:url(timg1.jpg) top left;background-size ...
- JavaScript动态设置div的样式的方法
有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...
- cocos2d(背景图片循环滚动)
背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
- js动态设置padding-top遇到的坑
我想通过js动态设置元素padding-top的百分比值:以下几种都是无法设置成功的: // setAttribute设置padding-top并且转换为百分比 imageBox.setAttribu ...
- JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
随机推荐
- Linux_磁盘管理理论概述
一.磁盘阵列 1.什么是磁盘阵列? 1️⃣:磁盘整列就是将多块独立的磁盘组合到一起,形成容量大的磁盘组. 2️⃣:将相同的数据存放到不多个的磁盘的不同位置 2.RAID0 1️⃣:RAID0是磁盘整列 ...
- flink Checkpoint优化
一.设置最小时间间隔 当flink应用开启Checkpoint功能,并配置Checkpoint时间间隔,应用中就会根据指定的时间间隔周期性地对应用进行Checkpoint操作.默认情况下Checkpo ...
- clickhouse_各个引擎表的特点
去重表:RepalcingMergeTree 1.使用order by排序键作为判断重复数据的唯一键 2.只有在合并分区的时候才会触发删除重复数据的逻辑 3.以数据分区为单位删除重复数据.当分区合并时 ...
- ssh远程主机执行命令或脚本
1.执行单一命令 [root@vps ~]# ssh user@192.168.9.243 "pwd; ls; rm -f Cent* ;echo --------; ls"/ho ...
- kotlin知识点
主构造函数里的参数,如果不声明为var或者val,则这个参数一般是用来初始化父类.它不算是这个类的字段,它的作用域只在主构造函数当中. val 的对象不仅数据不能变, 引用也不能变. //自定义的类似 ...
- ThinkPHP无限级分类(递归)
代码演示 没什么可说的直接看代码 <?php namespace app\controller; class Category { //模拟假数据 protected static functi ...
- 写Bug时,需要注意的几点 02
重构2-重新组织函数 重构的基本技巧--小步前进,频繁测试. 模式是你希望到达的目标,重构则是到达之路. 在单进程软件中,你永远不必操心多么频繁地调用某个函数,因为函数的调用成本很低.但在分布式软件中 ...
- week-03
1.简述HTTP交互原理 1.浏览器分析输入访问的地址 域名(IP)+$uri 2.读取浏览器缓存 3.请求DNS服务器,解析域名,返回IP 4.建立TCP连接,三次握手 5.发送请求 6.接收返回请 ...
- Nucleus-SE迁移:未实现的设施和兼容性
Nucleus-SE迁移:未实现的设施和兼容性 Nucleus SE migration: Unimplemented facilities and compatibility Nucleus SE的 ...
- 狂神说Linux笔记:Vim和账号、用户组、磁盘管理
什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. 简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但 ...