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

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. C#基础复习(2) 之 装箱拆箱

    参考资料 [1] @只增笑耳Jason的回答 https://www.zhihu.com/question/57208269 [2] <C# 捷径教程> 疑难解答 装箱和拆箱是什么? 何时 ...

  2. wpf简单进度条

    UserControl x:Class="WpfApplication1.UserControl2" xmlns="http://schemas.microsoft.co ...

  3. 使用cropper插件进行图片裁剪 并上传

    cropper插件的使用和 github地址: github 官方实例 我参考的中文文档: https://www.cnblogs.com/baka-sky/p/8001577.html 因为我是.n ...

  4. SFML从入门到放弃(3) 视角和碰撞检测

    SFML从入门到放弃(3) 视角和碰撞检测 视角 window.draw();所画出的对象是在世界坐标的绝对位置. 视角可以选定在窗口中显示世界坐标下的的哪一个区域. sf::View init_vi ...

  5. asp.net mvc 5 初体验

    参考:http://www.asp.net/mvc/tutorials/mvc-5/introduction/getting-started 1. 新建 ASP.Net Web 应用程序,跟着向导一路 ...

  6. 模仿 AppStore 顶部动画

    App Store 顶部动画 App Store 中 Games.Apps.Updates 的顶部动画的特点: 自然状态下是大标题,右边有一个 button 顶上去时,变成小标题,右边按钮消失 导航栏 ...

  7. OpenCV2计算机编程手册(二)基于类的图像处理

    1. 在算法设计中使用策略(Strategy)模式 策略设计模式的目标是将算法封装在类中.因此,可以更容易地替换一个现有的算法,或者组合使用多个算法以拥有更复杂的处理逻辑.此外,该模式将算法的复杂度隐 ...

  8. php5数组与php7数组区别

    http://ju.outofmemory.cn/entry/197064 http://www.fzb.me/2015-9-16-php7-implementation-hashtable.html ...

  9. 汉诺塔问题(C++版)

    题目描述 Description 约19世纪末,在欧州的商店中出售一种智力玩具,在一块铜板上有三根杆,最左边的杆上自上而下.由小到大顺序串着由64个圆盘构成的塔.目的是将最左边杆上的盘全部移到中间的杆 ...

  10. Visual Studio和eclipse的大小写转换快捷键

    Visual Studio: 转小写:ctrl + u 转大写:  ctrl + shift + u eclipse: 转小写:  ctrl + shift + y 转大写:  ctrl + shif ...