1. //首页自动更换背景特效开始============================================
  2.  
  3. var curIndex = 0;
  4. //时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下。
  5. var timeInterval = 4000;
  6.  
  7. //定义一个存放照片位置的数组,可以放任意个,在这里放3个
  8. var arr =["Image/1.jpg","Image/2.jpg","Image/3.jpeg"];
  9. setInterval(changeImg, timeInterval);
  10. function changeImg() {
  11.  
  12. //获得id名为d1的对象
  13. var obj = document.getElementById("index");
  14. if (curIndex == arr.length - 1) {
  15. curIndex = 0;
  16. } else {
  17. curIndex += 1;
  18. }
  19. //设置d1的背景图片
  20. obj.style.backgroundImage= "URL("+arr[curIndex]+")";       //显示对应的图片
  21. }

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

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. gridview获取选中行索引及当前行数据

    gridview获取选中行索引及当前行数据 一.非直接绑定数据: <!--前台传值--> <asp:TemplateField HeaderText="操作"&g ...

  2. 『原创』手把手教你搭建一个实用的油耗App(一)

    前言: 入行快10年,有点积蓄,三年前买了代步车.于是乎,汽车油耗开销就成了每个月都必须关注的问题.三年来,用过了无数油耗记录软件,比如最知名的“小熊油耗”,从第一次用,一直到最新一版,感觉越来越“臃 ...

  3. linux ab压力测试工具及ab命令详解

    原文链接:https://blog.csdn.net/qq_27517377/article/details/78794409 yum -y install httpd-tools ab -v 查看a ...

  4. brew - 更换国内源

    brew如果不换成国内源,安装软件时候可能会出问题,不是安装不了就是速度很慢,所以使用它,更换国内游是比较好的选择! 我更换的是清华大学开源软件镜像站,打开shell窗口,依次执行下面命令: cd & ...

  5. leetcode 120. 三角形最小路径和 JAVA

    题目: 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和 ...

  6. leetcode 78. 子集 JAVA

    题目: 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3],   [1], ...

  7. Reservoir Sampling-382. Linked List Random Node

    Given a singly linked list, return a random node's value from the linked list. Each node must have t ...

  8. python 爬图 helloworld

    最近发现 吾志 上用户的头像都很个性,另外,对于没有把日记设为私密的用户,最后一天的日记是公开的,谁都可以查看. 所以,如果每天把所有可查看的日记爬一遍,那么-- 哈哈 以前对爬虫只是了解一点点,没有 ...

  9. vue-router进阶笔记

    导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,大白话,检测路由跳转过程中的具体的变化. 一.全局前置守卫——router.beforeEach 使用router. ...

  10. MVC各部分技术体现

      视图层用jsp,javascript 作用--显示数据,接受用户输入数据 控制层用servlet 作用--接收视图层数据,传输 给业务逻辑层(即模型层) 模型层用普通java class 作用-- ...