CSS

.home{
position: relative;
width: 100%;
height: 900px;
overflow: hidden;
}
.home #tup{
position: absolute;
}
.home #tup img{
/*position: absolute;*/
}

HTML

<div class="home">
<div id="tup">
<img id="image" src="/static/images/service.jpg"></div>
</div>

JS

        $(function () {
var curIndex = 0;
//时间间隔(单位毫秒) ,每秒钟显示一张
var timeInterval = 2000;
var arr = new Array();
arr[0] = "/static/images/service.jpg"
arr[1] = "/static/images/equip.jpg"
arr[2] = "/static/images/operation.jpg"
function changeImg() {
if (curIndex == arr.length-1){
curIndex = 0;
}
else{
curIndex += 1;
}
$('#image').attr('src',arr[curIndex]);
//此处arr[curIndex]为路径,不需要加引号
}
setInterval(changeImg,timeInterval);
})

js实现图片变化的更多相关文章

  1. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  2. JS实现图片跟随鼠标移动

    在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...

  3. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  4. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  5. js简单 图片版时钟,带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  7. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  8. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  9. Lazyr.js – 延迟加载图片(Lazy Loading)

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

随机推荐

  1. C语言经典题目

    回顾一下吧: 一. 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 解析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. 常规 ...

  2. Thymleaf中th:each标签遍历list如何获取index

    简单介绍:传递给后台一个String类型的list,需要获取到list的每一个元素,然后进行筛选,得到正确的文本值,看代码就明白了 代码: //后台java代码//failList是一个String类 ...

  3. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...

  4. 金蝶K/3 审批相关SQL语句

    金蝶K/3 审批相关SQL语句 --http://127.0.0.1/lightApp/todocheckTask.aspx?AccID=84&&FClasstypeID=1071&a ...

  5. Linux 定时任务的配置

    通常我们会需要定时启动一些shell脚本,类似Windows中的Task Scheduler, 下面是在AWS EMR Cluster 主几点上配置的步骤: 1. 先创建一个shell脚本,将需要执行 ...

  6. Android高级工程师面试实战,您会挂么?

    xxx公司面试总结 面试形势 群聊(2个面试官+HR+自己) 面试流程 自我介绍 面试官根据你的介绍开始问 你对我们公司有什么想了解的么(复活卡,要时回到没有了也就没有了,可以让面试官给自己提一下建议 ...

  7. js事件循环机制 (Event Loop)

    一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...

  8. docker 安装mongo

    1.docker安装参考docker官网教程 2.docker中获取mongo镜像 sudo pull mongo 3.通过run命令新建/启动容器,容器名称为mongo,本地宿主机如果27017端口 ...

  9. C# ref与out关键字解析

    简介:ref和out是C#开发中经常使用的关键字,所以作为一个.NET开发,必须知道如何使用这两个关键字. 1.相同点 ref和out都是按地址传递,使用后都将改变原来参数的数值. 2.ref关键字 ...

  10. [转] Java程序员学C#基本语法两个小时搞定(对比学习)

    Java程序员学C#基本语法两个小时搞定(对比学习)   对于学习一门新的语言,关键是学习新语言和以前掌握的语言的区别,但是也不要让以前语言的东西,固定了自己的思维模式,多看一下新的语言的编程思想. ...