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 ...
随机推荐
- 【深度思考】聊聊JDK动态代理原理
1. 示例 首先,定义一个接口: public interface Staff { void work(); } 然后,新增一个类并实现上面的接口: public class Coder implem ...
- Go语言入门实战: 猜谜游戏+在线词典
包含基础语法和入门Go语言的3个案例 速览基础语法 对于耳熟能详的顺序结构.分支结构(if else-if else.switch).循环结构(for)不作赘述. 数组: 长度固定的元素序列 pack ...
- KB5024276 - SQL Server 2019 的累积更新 20
发布日期: 2023/4/13 版本: 15.0.4312.2 摘要 此更新中的已知问题 此更新包括的改进和修补程序 如何获取或下载此或最新的累积更新包 文件信息 此更新注意事项 如何卸载此更新 参考 ...
- STM32下载ELF文件、最小可执行bin文件测试
1.STM32能下载ELF格式的文件吗? 答:可以.因为所谓的bin文件就是ELF文件的.text代码段. 当然前提是下载工具能识别ELF文件格式,STM32下载ELF文件并不意味着STM32可以把E ...
- SpringBoot SpringSecurity 介绍（基于内存的验证）
SpringBoot 集成 SpringSecurity + MySQL + JWT 附源码,废话不多直接盘 SpringBoot已经为用户采用默认配置,只需要引入pom依赖就能快速启动Spring ...
- （原创第一篇，踩坑无数得来的，对Ai自动化测试框架很有帮助）appium自动化测试时遇到不能使用element定位的在用坐标点击之后获取焦点如何输入文本
现在开发的前端界面使用vue或者更牛逼技术,导致使用appium或者uiautomator2做自动化测试时不能识别到元素,无法使用传统的id,name或者xpath,这时我们需要使用坐标点击文本框.有 ...
- Prism Sample 11-UsingDelegateCommands
本例的知识点,全在ViewModel中,看代码: 1 public class MainWindowViewModel : BindableBase 2 { 3 private bool _isEna ...
- mosn基于延迟负载均衡算法 -- 走得更快，期待走得更稳
前言 这篇文章主要是介绍mosn在v1.5.0中新引入的基于延迟的负载均衡算法. 对分布式系统中延迟出现的原因进行剖析 介绍mosn都通过哪些方法来降低延迟 构建来与生产环境性能分布相近的测试用例来对 ...
- 基于CentOS 7.6安装及配置APISIX 3.0环境
最近一直在研究微服务相关内容,通过对比各大API网关,发现新起之秀 APISIX无论从开源程度上来讲还是功能上,都拥有很大的优势. 经历了几天折磨一样的学习,目前在本地环境中配置成功了一套,以供自己留 ...
- 基于APM模式的异步实现及跨线程操作窗体或控件方法的实现示例
最近在一家某电力外派公司开发相关于GIS的功能,在实现代码的过程中出现了一些常见的问题比如: 1.跨线程执行窗体或控件操作(直接使用委拖) 2.异步模式执行某长时间耗时方法 经过一系列摸索可算找到解决 ...