js实现图片变化
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实现图片变化的更多相关文章
- 使用 FocusPoint.js 实现图片的响应式裁剪
通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...
- JS实现图片跟随鼠标移动
在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里. 我们用到的只有这个对象的两个属性,clientX与cli ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- js简单 图片版时钟,带翻转效果
js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
- ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
随机推荐
- (转)http authorization 基本认证
转:https://www.cnblogs.com/chenrong/articles/5818498.html http协议是无状态的, 浏览器和web服务器之间可以通过cookie来身份识别. 桌 ...
- Oracle中和mysql中函数的区别
oracle --> mysqlto_char(sysdate,'yyyy-mm-dd')-->date_format(s ...
- 开发快捷键(Eclipse,STS)
Eclipse 常用快捷键 Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 1. [ALT+/] 此快捷键为 ...
- ES6 语法学习(二)
1.类的建立与继承 constructor方法是类的构造函数是默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个默认的constru ...
- Java项目使用SQLite数据库后无法启动的问题
背景: Java > maven 的 jar 项目 功能是记录用户的每天的按键次数 使用 jar2exe 工具将 jar 转为 exe 可执行文件 原本项目中使用的Mysql数据库,使用Myba ...
- TensorFlow的Bazel构建文件结构
目录 说明 分析 全局设定文件:$TF_ROOT/WORKSPACE 外部依赖项入口:tensorflow/workspace.bzl 看看有多少package? 本来是想理解一下TF源码编译过程的, ...
- aop切入mapper接口
***************************************分割线****************************************************** 参考: ...
- POJ 1515 Street Directions (边双连通)
<题目链接> 题目大意: 有m条无向边,现在把一些边改成有向边,使得所有的点还可以互相到达.输出改变后的图的所有边(无向边当成双向的有向边输出). 解题分析: 因为修改边后,所有点仍然需要 ...
- 第七篇 Flask 中路由系统以及参数
Flask中的路由系统其实我们并不陌生了,从一开始到现在都一直在应用 @app.route("/",methods=["GET","POST" ...
- Mysql SQL执行错误:#1136
情况:在插入数据时可能会遇到这种情况: 原因: 插入时的数据个数与表中的字段个数不一致 解决方法: 检查表中的字段数与代码中所插入的数据字段数是否一致 例如:以下为Salary表中结构 虽然ActI ...