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 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
随机推荐
- css的transform属性让子元素在父元素里面垂直水平居中
- 关于读取excel 和 写excel
def sync_db(data_list): '''Synchron potential student from excel to PrepareToCrm ''' push_list = ...
- sass—使用自定义function和@each实现栅格布局
/*使用自定义function和@each实现栅格布局*/ @function buildLayout($num: 5){ $map: (defaultValue: 0); //不能直接生成col,需 ...
- add web server(nginx+apache)
#!/bin/bash # # Web Server Install Script # Last Updated 2012.09.24 # ##### modify by WanJie 2012.09 ...
- query string parameters 、 Form Data 、 Request Payload
微信小程序ajax向后台传递参数的时候总是报400错误 然后看了一下network 发现是query string parameters,但是我写的header如下 header:{ "Co ...
- Python内置函数之-property
property 是一个内置的装饰器函数,只在面向对象中使用 求一个圆的周长和面积 # 周长和面积都是通过类的方法得到from math import pi class Cricle: def __i ...
- c# 向数据库插数据超过1000条
今天想着如何大批量插入数据到数据库中 最开始的想法是使用insert循环插入 但每次都要创建数据库连接 这是非常消耗时间和消耗资源的事.后在网上看到了说使用SqlBulkCopy ,就看了看文档和别 ...
- SpringBoot使用Nacos配置中心
本文介绍SpringBoot如何使用阿里巴巴Nacos做配置中心. 1.Nacos简介 Nacos是阿里巴巴集团开源的一个易于使用的平台,专为动态服务发现,配置和服务管理而设计.它可以帮助您轻松构建云 ...
- java自动化-junit框架简述
本人使用的是java的junit框架来组织的自动化测试,故我这边需要简单介绍一下junit框架 首先,建议自行百度一下junit框架,先有一个大概的了解 所谓的接口自动化测试,会对多个接口中每一个接口 ...
- vue入门1(搭建项目)
安装node.js 安装cnpm npm install -g cnpm --registry=http://registry.npm.taobao.org 安装vue-cli脚手架构建工具 npm ...