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. ubuntu 16.04 安装 kubelet、kubeadm 和 kubectl

    解决了***之后,就开始K8S安装的正式旅程,本次记录  kubelet.kubeadm 和 kubectl 的安装: apt-get update && apt-get instal ...

  2. Jquery点击div之外的地方隐藏当前div

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  3. Codeforces 1083C Max Mex [线段树]

    洛谷 Codeforces 思路 很容易发现答案满足单调性,可以二分答案. 接下来询问就转换成判断前缀点集是否能组成一条链. 我最初的想法:找到点集的直径,判断直径是否覆盖了所有点,需要用到树套树,复 ...

  4. 11、Grafana 5.0 新功能特性(译文)

      Grafana v5.0的新功能 这是Grafana有史以来最重大的更新. 本文将详细介绍主要的新功能和增强功能. New Dashboard Layout Engine enables a mu ...

  5. cf1153E 二分思维交互

    恶臭的交互题 /* 一个结论:一个矩形将空间分割成两部分,如果开头结尾都在一个部分内,那么穿过矩形边框的线条数就是偶数,反之就是奇数 通过这个结论来进行判断 先询问999次将两个x坐标确定,方法是询问 ...

  6. linux无法联网使用yum提示cannot find a valid baseurl for repobase7x86_64

    每次安装新镜像时会遇到物理机有网络新安装的linux中却无法与物理机通信(不能连网),只能玩一些预装功能.命令,无法使用各种常用工具(特别是MINI版连ifconfig都没有o(╥﹏╥)o),下面记录 ...

  7. Ubuntu下 安装MiniGUI

    1. 需要下载的组件 首先需要这些安装包,这些安装包可以在MiniGUI官网上下载. libminigui-gpl-3_0_12.tar.gzmg-samples-3_0_12.tar.gzfreet ...

  8. Java Spring Boot VS .NetCore (七) 配置文件

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  9. python——常见排序算法解析

    算法是程序员的灵魂. 下面的博文是我整理的感觉还不错的算法实现 原理的理解是最重要的,我会常回来看看,并坚持每天刷leetcode 本篇主要实现九(八)大排序算法,分别是冒泡排序,插入排序,选择排序, ...

  10. laravel 服务容器

    服务容器,也叫IOC容器,其实包含了依赖注入(DI)和控制反转(IOC)两部分,是laravel的真正核心.其他的各种功能模块比如 Route(路由).Eloquent ORM(数据库 ORM 组件) ...