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实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
随机推荐
- 【转载】打造基于 Centos 7.X 的 spice 服务器
[转载]打造基于 Centos 7.X 的 spice 服务器 https://segmentfault.com/a/1190000011991047
- Play-book格式写法
Play-Book playbook的组成 play 角色(主机或者主机组) task 任务,演戏的动作 总结:playbook是有多个play组成,一个play有多个task:剧本由一个或者多个演员 ...
- Linux 仿真终端:SecureCRT 常用配置
SecureCRT 有两类配置选项,分别是会话选项和全局选项. 会话选项:修改配置只针对当前会话有效 全局选项:修改配置对所有会话有效 一般会先选择全局选项修改全局配置,然后选择会话选项单独修改个别会 ...
- Python数模笔记-PuLP库(1)线性规划入门
1.什么是线性规划 线性规划(Linear programming),在线性等式或不等式约束条件下求解线性目标函数的极值问题,常用于解决资源分配.生产调度和混合问题.例如: max fx = 2*x1 ...
- ES6笔记2
ES6笔记2 Promise Promise 是 ES6 引入的异步编程的新解决方案,语法上是一个构造函数 一共有3种状态,pending(进行中).fulfilled(已成功)和rejected(已 ...
- 鸿蒙 Android iOS 应用开发对比02
个人理解,不抬杠 转载请注明原著:博客园老钟 https://www.cnblogs.com/littlecarry/ IOS 把界面抽象成 "控制" Controller:And ...
- 巧用Reflections库实现包扫描
1.需求 需要扫描某个包中的某个接口的实现类的需求 2.maven 依赖引入 <dependency> <groupId>org.reflections</groupId ...
- Tengine Framework基础
Tengine Framework基础 最受开发者喜爱的边缘AI计算框架 Tengine是OPEN AI LAB推出的自主知识产权的边缘AI计算框架,致力于解决AIoT产业链碎片化问题,加速AI产业化 ...
- 在Yolov5 Yolov4 Yolov3 TensorRT 实现Implementation
在Yolov5 Yolov4 Yolov3 TensorRT 实现Implementation news: yolov5 support 引论 该项目是nvidia官方yolo-tensorrt的封装 ...
- python接口自动化之读取excel表的数据(使用openpyxl模块)
1.安装openpyxl:pip install openpyxl 2.基础知识,直接上代码 import openpyxl #导入模块 wd2=openpyxl.load_workbook('stu ...