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实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
随机推荐
- 【打印机】无法连接 fail to connect to server cups 服务器错误 打印机
打印机 fail to connect to server cups 服务器错误兆芯 打印机 连不上了####message可知 服务fail## systemd: cups.servi ...
- 攻防世界 WriteUp
附:|>>>攻防世界-WEB-新手练习区<<<| WriteUp目录 01.|>>>baby_web<<<| 02.|>& ...
- wmctrl像xmonad那样方便地用快捷键来控制任务窗口的显示
窗口左右互搏之wmctrl篇 分类: LINUX 2012-10-24 16:34:41 一直有个念头,就是能够像xmonad那样方便地用快捷键来控制任务窗口的显示,今天弄wmctrl,刚好有时间 ...
- Spring5.0源码学习系列之事务管理概述
Spring5.0源码学习系列之事务管理概述(十一),在学习事务管理的源码之前,需要对事务的基本理论比较熟悉,所以本章节会对事务管理的基本理论进行描述 1.什么是事务? 事务就是一组原子性的SQL操作 ...
- docker swarm外部验证负载均衡时不生效
问题描述 我在本地创建了3个装了centos7的虚拟机, 并初始化了swarm集群, 即1个manager节点, 2个worker节点; 三台机子的ip分别是 192.168.124.8 - (man ...
- 记go中一次http超时引发的事故
记一次http超时引发的事故 前言 分析下具体的代码实现 服务设置超时 客户端设置超时 http.client context http.Transport 问题 总结 参考 记一次http超时引发的 ...
- Tengine MLOps概述
Tengine MLOps概述 大幅提高产业应用从云向边缘迁移的效率 MLOps Cloud Native 聚焦于提升云端的运营过程效率 MLOps Edge Native 聚焦于解决边缘应用开发及异 ...
- ADAS感知算法观察
ADAS感知算法观察 如果把一台ADAS车辆比作一个人的话,那么激光雷达.毫米波雷达.摄像头.IMU及GPS等等部件就相当于人的眼睛.鼻子.耳朵.触觉及第六感等器官或系统. 环境感知作为无人驾驶的第一 ...
- 所有处理都走向AI
所有处理都走向AI All Processing Bends Toward AI 旧金山--谷歌正在试验机器学习(ML)来执行集成电路设计中的位置和路径,并取得了很好的效果.上周在ISSCC会议上宣布 ...
- runtime系统的Cello
runtime系统的Cello 通过充当一个现代的.功能强大的runtime系统,Cello使许多以前在C中不切实际或笨拙的事情变得简单,例如: 通用数据结构 多态函数 接口/类型类 构造函数/析构函 ...