js动态改变VID图片背景图片
2015-04-19 21:30
429 查看
js动态改变VID图片背景图片
js代码如下function $(id) { return document.getElementById(id); } //创建一个对象 var oPic = {}; //存放图片的数组 oPic.imgs = ["01-1.jpg","01.jpg","02-1.jpg","02.jpg","03-1.jpg","03.jpg", "04-1.jpg","04.jpg","05-1.jpg","05.jpg","06-1.jpg","06.jpg", "07-1.jpg","07.jpg","08-1.jpg","08.jpg","09-1.jpg","09.jpg", "10-1.jpg","10.jpg","11-1.jpg","11.jpg","12-1.jpg","12.jpg"]; oPic.curPic = 0; oPic.timer = null; oPic.img = null; var imgsrc = null; //根据图片数组下标循环切换图片 function changeImage1() { if(oPic.curPic < oPic.imgs.length-1){ oPic.curPic++; }else{ oPic.curPic = 0; } imgsrc = "assets/images/"+oPic.imgs[oPic.curPic]; $("divId").style.backgroundImage="url("+imgsrc+")"; oPic.timer=window.setTimeout(changeImage2,3000); } function changeImage2() { if(oPic.curPic < oPic.imgs.length-1){ oPic.curPic++; }else{ oPic.curPic = 0; } imgsrc = "assets/images/"+oPic.imgs[oPic.curPic]; $("divId").style.backgroundImage="url("+imgsrc+")"; oPic.timer=window.setTimeout(changeImage1,300); } function init() { //为标签指定初始图片地址 imgsrc = "/assets/images/"+oPic.imgs[oPic.curPic]; $("divId").style.backgroundImage="url("+imgsrc+")"; oPic.timer=window.setTimeout(changeImage1,1000); } //在加载时初始化,没有的化不显示内容 window.onload=init;
HTML代码
<div id="divId" class="div_conter" style="background-size:100% 100%"></div> ..... <script language="JavaScript" src="/assets/js/my_js/changePic.js"></script>
相关文章推荐
- js实现点击图片改变页面背景图的方法
- 使用js操作css实现js改变背景图片示例
- 微信小程序,动态改变背景图片
- rails4 ,用js改变div的背景图片
- cocos2dx 3.x(动态改变精灵的背景图片)
- JS使用oumousemove和oumouseout动态改变图片显示的方法
- 使用js操作css实现js改变背景图片示例
- js动态改变图片src在ie6下的兼容问题
- js 改变div 背景图片
- JS之鼠标移上去的时候改变背景图片
- UGUI之用脚本动态的改变Button的背景图片
- 对鼠标移到图片上及离开图片时,图片背景颜色改变的JS实现
- js实现点击图片改变页面背景图的方法
- 动态改变背景图片
- JS实现动态改变对话窗口和图片样式的聊天;
- js改变背景图片
- 使用js操作css实现js改变背景图片
- JS控制下拉菜单框,动态改变图片
- 超简短JS实现下拉菜单改变网页背景图片
- 动态改变 图片的背景颜色