js 背景自动切换
//首页自动更换背景特效开始============================================ 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 背景自动切换的更多相关文章
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- Python3实现Win10桌面背景自动切换
[本文出自天外归云的博客园] 得空写了个自动切换桌面背景图片的小程序.再不写python就要扔键盘了,对vue还有那么一点好感,天天php真是有够烦. 准备工作 准备个文件夹放在桌面上,平时看到什么高 ...
- CSS实现页面背景自动切换功能
From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- js 图片自动循环切换setInterval();
stlye样式定义 <style type="text/css"> body{background-image: url(img/001.jpg ...
- 原生js实现随着滚动条滚动,导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 原生 JS 实现 VS Code 自动切换输入法状态!这次没有AHK
上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...
随机推荐
- JEECG(二) JEECG框架下调用webservice java springmvc maven 调用 webservice
JEECG系列教程二 如何在JEECG框架下使用webservice 本文所使用的webservice是c#开发的 其实无论是什么语言开发的webservice用法都一样 java springmvc ...
- Oracle数据库设置Scott登录
Oracle数据库Scott登录 在安装数据库时,用户登录选项中,Scott用户默认是未解锁的. 用户名填写as sysdba:密码是原来设置的,登录进去,新建SQL窗口,输入命令: alert us ...
- HDU4622 Reincarnation
题目链接:戳我 因为对应的很多询问,所以我们一定要将每一种询问先处理出来,然后O(1)查询. 至于怎么处理出来子串的子串呢? 我们固定左端点,然后依次加入子串即可.然后统计的时候直接统计last那一个 ...
- influxDB 基本操作
#创建数据库 create database "db_name" #显示所有的数据库 show databases #删除数据库 drop database "d ...
- Android - "已安装了存在签名冲突的同名数据包",解决方法!
错误提示:已安装了存在签名冲突的同名数据包. 解决方法:打开Android Studio,打开logcat,用usb线连接你出错的手机,识别出手机之后,在你的项目后面,点击“run”按钮,随后AS会提 ...
- 简述项目中优化sql语句执行效率的方法,从哪些方面,sql语句性能如何分析?
(1)尽量选择较小的列: (2)将where中用的比较频繁的字段建立索引: (3)select中避免使用*: (4)避免在索引列上使用计算.not in和<>等操作: (5)当只需要一行数 ...
- POJ 2828Buy Tickets(线段树的单点维护)
Buy Tickets Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 20462 Accepted: 10096 Des ...
- 变不可能为可能 - .NET Windows Form 改变窗体类名(Class Name)有多难?续篇
发布<.NET Windows Form 改变窗体类名(Class Name)有多难?>转眼大半年过去了,要不是在前几天有园友对这篇文章进行评论,基本上已经很少关注它了,毕竟那只是一个解惑 ...
- SecureCRT连接Ubuntu,centos失败,长时间的重新连接,连接不了解决办法
Ubuntu,centos默认未安装ssh远程加密连接服务.使用命令,安装即可. 0.sudo apt-get install openssh-server openssh-client 1.rpm ...
- Java之集合(二十七)其它集合
转载请注明源出处:http://www.cnblogs.com/lighten/p/7551368.html 1.前言 本章介绍剩余的3个集合类:ConcurrentSkipListSet.CopyO ...