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

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. ARM 编译工具keil 和 IAR 命令行编译和下载

    目的 不管是Keil还是IAR对代码补全,高亮等编辑功能支持的不是很好,虽然现在的Keil 5.25对界面的支持好了很多,但是很多人还是青睐于第三方的编辑器,命令行的编译方式可以让我们在使用第三方编辑 ...

  2. jzoj100031

    這題是結論題 好玄學,不懂 代碼: #include<bits/stdc++.h> using namespace std; struct no{ int v,p; bool operat ...

  3. 极验(Geetest) Laravel 5 集成开发包,让验证更安全

    简述 在网站开发中使用频率最高的工具之一便是验证码,验证码在此也是多种多样,不过简单的图片验证码已经可以被机器识别,极验验证码提供了一个安全可靠的滑动验证码体系,让网站开发更加安全. 先感受一下这种验 ...

  4. [JavaScript] js获取当前页面url网址信息

    在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结. 下面我们举例一个URL,然后获得它的各个组成部分:http://i.cnblog ...

  5. python pip安装模块提示错误failed to create process

    python pip安装模块提示错误failed to create process 原因: 报这个错误的原因,是因为python的目录名称或位置发生改动. 解决办法: 1.找到修改python所在的 ...

  6. 语法糖----C#的async和await

    C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. public class MyClass { public MyClass() { DisplayValue ...

  7. pythonweb框架Flask学习笔记03-变量规则

    #-*- coding:utf-8 -*- from flask import Flask app=Flask(__name__) @app.route('/post/<int:postid&g ...

  8. node 利用http和cheerio编写简易爬虫

    首先cnpm init创建一个package.json 引入cheerio模块 cnpm install --save cheerio 然后开始编写代码 let cheerio = require(' ...

  9. WebAPI POST GET

    简而言之,在WEBAPI中采用GET方法方法时在接受参数的时候会在参数前申明 [fromuri]标注从uri中获取如: [HttpPost] public IHttpActionResult AddP ...

  10. 使用mysqldump备份单表数据,并使用navicat导出单表中部分字段到excel

    今天工作上遇到一个问题,客户需要将生产环境上数据库中用户表中的用户名.登录名.邮箱三个字段导出到excel中,查了一下,分两个步骤完成了任务 1. 使用mysqldump命令将生产环境的user表备份 ...