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 ...
随机推荐
- AI人工智能简史
AI人工智能简史 最近学习AI,顺便整理了一份AI人工智能简史,大家参考: 1951年 第一台神经网络机,称为SNARC: 1956年 达特茅斯学院会议,正式确立了人工智能的研究领域: 1966年 M ...
- 详解 APISIX Lua 动态调试插件 inspect
作者罗锦华,API7.ai 技术专家/技术工程师,开源项目 pgcat,lua-resty-ffi,lua-resty-inspect 的作者. 原文链接 为什么需要 Lua 动态调试插件? Apac ...
- VUE3企业级项目基础框架搭建流程(3)
VUE-Router npm install vue-router@4 安装完成后,在项目目录里新建一个router文件,我这里的用的是typeScript,所以建立的是router.ts, 该文件是 ...
- C#中使用CAS实现无锁算法
CAS 的基本概念 CAS(Compare-and-Swap)是一种多线程并发编程中常用的原子操作,用于实现多线程间的同步和互斥访问. 它操作通常包含三个参数:一个内存地址(通常是一个共享变量的地址) ...
- 如何使用Webpack工具构建项目
起步 webpack 用于编译 JavaScript 模块.一旦完成 安装,你就可以通过 webpack CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读 核心概念 和 对比, ...
- 批量上传iOS应用程序截图的实用技巧
提交iOS应用程序截图到iTunes Connect是一项非常繁琐的任务,因为你必须上传多达数十张屏幕截图,这是一个重复而枯燥的过程.但是,我们有一个好消息要告诉开发者们,现在有一个工具可以帮助你 ...
- 浏览器发送POST请求、DELETE请求
1.浏览器发送POST请求 方法一: var xml = new XMLHttpRequest(); var url = "http://127.0.0.1:8800/admin/user& ...
- 2021-07-09：股票问题6。给定一个整数数组 prices，其中第 i 个元素代表了第 i 天的股票价格 ；整数 fee 代表了交易股票的手续费用。你可以无限次地完成交易，但是你每笔交易都需要付
2021-07-09:股票问题6.给定一个整数数组 prices,其中第 i 个元素代表了第 i 天的股票价格 :整数 fee 代表了交易股票的手续费用.你可以无限次地完成交易,但是你每笔交易都需要付 ...
- Redis的三种持久化策略及选取建议
概述 Redis是一个基于内存的高性能的键值型数据库,它支持三种不同的持久化策略:RDB(快照).AOF(追加文件).混合.这三种策略各有优缺点,需要根据不同的场景和需求进行选择和配置.本文将介绍这三 ...
- Django4全栈进阶之路6 对各类数据库连接设置
Django 4 支持多种类型的数据库连接,包括 MySQL.PostgreSQL.SQLite.Oracle 等.对于不同类型的数据库,需要进行不同的设置.下面是 Django 4 对各类数据库连接 ...