js 更换背景图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        body{background: #dddddd}
        #div1{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body id="div1" onload="showBgImage()">

</body>
</html>
<script>

    function showBgImage() {

        var curIndex = 0;           //定义开始索引 
        var timeInterval = 1000;
        //定义切换时间,   1s=1000ms 
        //定义存放图片数组      
        var arr = new Array();
        arr[0] = "images/240.png";    //给数组每一项赋值,就是添加图片路劲 
        arr[1] = "images/340.png";
        arr[2] = "images/240.png";
        arr[3] = "images/340.png";
        arr[4] = "images/240.png";
        arr[5] = "images/340.png";
        setInterval(changeImg, timeInterval);       //调用显示图片方法(参数为:方法名和切换时间) 
        function changeImg() {

            var obj = document.getElementById("div1");   //获得所要设置的元素                 
            if (curIndex == arr.length - 1) {
                curIndex = 0;
            } else {
                curIndex += 1;
            }
            obj.style.backgroundImage = "url(" + arr[curIndex] + ")";     //设置获得元素的背景图片       
        }

}
    </script>
时间: 2025-01-05 00:20:54

js 更换背景图的相关文章

HighCharts绘制JS折线图(后台传数据给前台基于JFinal框架)

/*****************************Controller(基于JFinal框架)**************/ package com.zzu.controller;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.List;import org.jfree.chart.ChartFactory;import org.jfree.chart.ChartUtilitie

js正则表达式图形化工具-rline

github地址:https://github.com/finance-sh/rline 在线demo: http://lihuazhai.com/demo/test.html 这是一个js正则表达式图形化工具,有以下功能: 在输入框填入正则表达式,支持格式:1,没有斜线,如:\d|\s ; 2,有斜线,如:/\d|\s/ 点击展示按钮,将会在下方生成正则流程图:同时在控制台中将会输出该正则的数据结构. 实例: 请在高级浏览器中运行. 我们的github地址:https://github.com

html+JS刷图实现视频效果

网页播放视频须要载入播放器,可是通过刷图也能实现视频播放的效果 JS中用到Z-index属性,记录一篇解说Z-index属性的博客的地址: http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html 方法1: JS的代码 <script type="text/javascript"> var imageNr = 0; var finished = new Array(); function createIm

最近发现了个js传图预览的函数和大家分享下

由于浏览器js沙箱,存在不同域,js无法直接调用电脑文件.在之前做传图预览的时候,基本的思路就是, 将图片先保存到服务器中缓存,然后返回一个服务器路径,并显示出图片,然而这样很耗缓存目录文件的.方法也比较复杂. 很幸运,发现了个可以直接预览图片的js 代码如下:(测试过火狐和chrome,都能够支持.在ie中,只支持ie8,还是不够完善,如有大神请指教) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

three.js贴图

使用图像作为材质.这时候,就需要导入图像作为纹理贴图,并添加到相应的材质中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="l

从相机相册获取图片裁剪后用于评论晒图或更换背景图

这是我人生中写的第一篇博客,是否要纪念一下这一刻(2016.09.01 16:52).其实关于写博客,老早就有这种写法,首先觉得他能够帮我总结我学到的和用过的技术,其次还能帮助那些和我有一样需求的人,我也是很开心啊,但是至于为什么现在才写第一篇,首先没有想好写什么,然后前段时间也确实比较忙.是不是那些来观技术的人已经想骂人了啊...啊哦!原谅我第一次写博客的激动心情吧! 废话不多说,开始我们的问题吧,首先因为我做了两次关于调用相机和相册获取图片的功能,觉得很有必要总结一下,下面我将从这两个功能出

JS甘特图 JQuery.Ganttyy

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库.它既可以图形化行程安排,也可以展示数据分布. 本人在原有基础上,修改了部分代码,较原有功能外,主要改进为: 1.修正"某一条数据为空时原有的代码js会报错的问题". 2.修正"ie显示时进度条会闪烁的问题". 3.json的数据不再为new Date(时间戳)的形式,直接为时间戳 下载地址为:待定 页面展示为: 其中,框1为上下翻页,框2表示滚动到当前时间,框3为滚动

JS 折线图

echarts 折线图.需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8"  type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Object> map = new HashMap<String, Object>();

简单的js焦点图切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-