js实现图片预览翻页
可以直接复制粘贴打开，图片是在线的，原理简单好懂！
效果
源码
<!DOCTYPE html>
<html>
<!--JQuery在线引用-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lv {
margin: 0 auto;
width: 1000px;
height: 800px;
background: rgb(150, 235, 180);
text-align: center;
}
#img{
width: 900px;
height: 600px;
margin-top: 60px;
}
#pre{
position: absolute;
right: 51%;
}
#next{
position: absolute;
right: 44%;
}
#info{
font-size: x-large;
padding-top: 30px;
}
</style>
</head>
<body>
<div id="lv">
<p id="info"></p>
<img id ='img' src="" alt="" />
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
<script type="text/javascript">
$(function(){
//获取两个按钮
var pre = document.getElementById("pre");
var next = document.getElementById("next");
//要切换图片就是要修改img 标签的src属性
//获取img 标签，但是返回的是数组，所以你得操作的是数组中的对象
var img = document.getElementsByTagName("img")[0];
//创建一个数组用来保存图片的路径
var imgArr = ["https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/560-300.jpg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/0537AFF0-55BA-4826-9192-BAA8813F0CA7_1_105_c.jpeg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/615A8F91-1822-445F-903E-5A87FA369977.jpeg"];
var index = 0;
var info = document.getElementById("info");
img.src = imgArr[0];
info.innerHTML = "总共" + imgArr.length + "照片，现在是第" + (index + 1) + "照片";
pre.onclick = function () {
if (--index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
info.innerHTML = "总共" + imgArr.length + "照片，现在是第" + (index + 1) + "照片";
};
next.onclick = function () {
if (++index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "总共" + imgArr.length + "照片，现在是" + (index + 1) + "照片";
};
})
</script>
</html>
js实现图片预览翻页的更多相关文章
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
随机推荐
- Java学习笔记14
1.Arrays类 Arrays类包含用于操作数组的各种方法(如排序和搜索).该类没有构造函数,直接使用类名.方法名()的方法调用需要的方法. 常用方法 方法 作用 public static S ...
- ShardingJDBC配置
Sharding-JDBC定位为轻量级Java框架,在Java的JDBC层提供的额外服务. 它使用客户端直连数据库,以jar包形式提供服务,无需额外部署和依赖,可理解为增强版的JDBC驱动,完全兼容J ...
- Linux shell和环境变量
环境变量 存储有关shell会话和工作环境信息:允许在内存中存储数据. 注意什么时候要用$ 什么时候不用$:用到变量,需要$;操作变量,不需要$.printenv除外 分为两类: 全局变量:对shel ...
- 音频处理库性能对比：计算mel频谱的速度哪个更快？
介绍 音频信号处理在各种应用中都发挥着重要的作用,如语音识别.音乐信息检索.语音合成等.其中,Mel频谱是一种常用的频域特征表示方法,用于描述人类听觉系统对频率的敏感程度. 在深度学习音频领域,mel ...
- [Pytorch框架] 1.1、Pytorch简介
文章目录 1.1 Pytorch 简介 1.1.1 PyTorch的由来 1.1.2 Torch是什么? 1.1.3 重新介绍 PyTorch 1.1.4 对比PyTorch和Tensorflow 1 ...
- Centos7.x 安装配置Web性能压力测试工具Siege
一.简介 Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力.可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重 ...
- Lucas定理——定义、证明、实现、运用
目录 什么是Lucas定理 证明Lucas定理 Lucas定理求解组合数的C++实现 什么是Lucas定理 这是一个有助于分解组合数来求解的定理,适合模数小,数字大的问题. 有质数 \(p\),对于\ ...
- 苦苦搞了半个通宵才搞定的直接使用Sliverlight将文件PUT到阿里云OSS
为了公司的项目,小的我各种折腾啊,不过高兴的是实现了Silverlight直接提交至阿里云OSS的文件上传,文件上传再也不用通过服务器中转了. 研究SDK发现还有个Node-oss.js,但还没进行测 ...
- selenium IDE插件的配置使用
开头 Selenium提供了一个可以自动录制脚本的插件 叫selenium IDE 让我们一起看看如何安装使用 安装 因为google扩展商城大多数人用不了,所以我们选用的是edag来下载seleni ...
- ADG无法切换：报错 ORA-16467
现象: ADG无法切换:验证时就报错 ORA-16467 记录问题,顺便展现一次troubleshooting的心路历程. 具体查询: 在主库操作, @primary 切换验证: alter data ...