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. Mysql --创建用户和授权,备份

    权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.update.grant等操作.那么一般情况在公司之后DBA工程师会创建一个 ...

  2. NOIP2016换教室

    题目 一道毒瘤概率期望DP.点这里 首先 对于每个时间段(就是每节课),我们有申请和不申请两种情况.如果不申请的话,一定在$ c[ i ] \(,否则,可能在\)c[ i ]\(,也可能在\)d[ i ...

  3. P2866 [USACO06NOV]糟糕的一天Bad Hair Day--单调栈

    P2866 [USACO06NOV]糟糕的一天Bad Hair Day 题意翻译 农夫约翰有N (N \leq 80000)N(N≤80000)头奶牛正在过乱头发节.每一头牛都站在同一排面朝东方,而且 ...

  4. PHP源码安装后设置别名

    PHP源码安装后测试是否能正常运行 每次在php目录./bin./php调用php很不方便,可以设置别名(方法一) vi ~/.bash_profile     (修改根目录下这个文件) 设置完成后还 ...

  5. tensorflow结果可视化-【老鱼学tensorflow】

    这次我们把上次的结果进行可视化显示,我们会把神经网络的优化过程以图像的方式展示出来,方便我们了解神经网络是如何进行优化的. 首先,我们把测试数据显示出来: # 显示测试数据 fig = plt.fig ...

  6. SparkCore | Rdd| 广播变量和累加器

    Spark中三大数据结构:RDD:  广播变量: 分布式只读共享变量: 累加器:分布式只写共享变量: 线程和进程之间 1.RDD中的函数传递 自己定义一些RDD的操作,那么此时需要主要的是,初始化工作 ...

  7. Cow Relays POJ - 3613 (floyd+快速幂)

    For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a relay race usin ...

  8. React(v16.8.4)生命周期详解

    当前版本v16.8.4 装载过程(组件第一次在DOM树中渲染的过程): constructor(常用) -> getInitialState(v16.0已废弃) -> getDefault ...

  9. JSONObject类的引用必须jar包

    JSONObject所必需的6个jar包: commons-beanutils-1.7.0.jar commons-collections-3.1.jar commons-lang-2.5.jar c ...

  10. Spring Cloud微服务笔记(三)服务治理:Spring Cloud Eureka快速入门

    服务治理:Spring Cloud Eureka 一.服务治理 服务治理是微服务架构中最为核心和基础的模块,它主要用来实现各个微服务实例的自动化注册与发现. 1.服务注册: 在服务治理框架中,通常会构 ...