//首页自动更换背景特效开始============================================

var curIndex = 0;
//时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下。
var timeInterval = 4000; //定义一个存放照片位置的数组,可以放任意个,在这里放3个
var arr =["Image/1.jpg","Image/2.jpg","Image/3.jpeg"];
setInterval(changeImg, timeInterval);
function changeImg() { //获得id名为d1的对象
var obj = document.getElementById("index");
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
//设置d1的背景图片
obj.style.backgroundImage= "URL("+arr[curIndex]+")";       //显示对应的图片
}

  效果不是很好  切换图片的时候有点卡顿

js 背景自动切换的更多相关文章

  1. jquery背景自动切换特效

    查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...

  2. Python3实现Win10桌面背景自动切换

    [本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...

  3. CSS实现页面背景自动切换功能

    From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...

  4. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  5. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  6. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  7. js 图片自动循环切换setInterval();

    stlye样式定义 <style type="text/css">             body{background-image: url(img/001.jpg ...

  8. 原生js实现随着滚动条滚动,导航会自动切换的效果

    最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. 原生 JS 实现 VS Code 自动切换输入法状态!这次没有AHK

    上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...

随机推荐

  1. Winform打包安装程序覆盖安装的实现

    1.修改项目程序集版本号. 2.设置Version,使当前版本号大于前一个版本号. 3.RemovePreviousVersions属性设置为true. 以上三步后,生成安装程序即可实现覆盖安装. P ...

  2. 如何: 在 VS中的设计时刻主从表绑定控件到数据库

    这个示例展示了如何在 Visual Studio 2005 的设计时刻,把一个 data-aware 控件 (XtraGrid.XtraPivotGrid.XtraVerticalGrid 等) 绑定 ...

  3. easyui-layout系列之布局(1)

    1.Layout布局 通过 $.fn.layout.defaults 重写默认的 defaults. 布局(layout)是有五个区域(北区 north.南区 south.东区 east.西区 wes ...

  4. Hessian——轻量级远程调用方案

    Hessian是caucho公司开发的一种基于二进制RPC协议(Remote Procedure Call protocol)的轻量级远程调用框架.具有多种语言的实现,但用的最多的当然是Java实现 ...

  5. HTTP协议、HTTP协议原理分析

    百度百科中说明: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为 ...

  6. git 常用命令(不定期更新)

    过程写写吧,总是忘记.1,在一个文件夹下 键入 git init ,使之成为Git可以管理的仓库.2,编写一个文件readme.txt.3,把文件添加到仓库 git add readme.txt4,把 ...

  7. 在centOS 7 中安装 MySQL

    知道来源:https://www.cnblogs.com/bigbrotherer/p/7241845.html 1 下载并安装MySQL官方的 Yum Repository [root@localh ...

  8. springboot入门之简单demo

    项目构建 我们采用maven构建SpringBoot工程,首先创建一个maven工程,对应的pom文件如下: <properties> <java.version>1.8< ...

  9. POJ 2377

    #include<stdio.h> #define MAXN 1005 #include<iostream> #include<algorithm> #define ...

  10. 一个用JS数组实现的队列

    一个用JS数组实现的队列 /*一个用数组实现的队列*/ function Queue(){ this.dataStore = [];//存放队列的数组,初始化为空 this.enqueue = enq ...