原文地址

可以直接复制粘贴打开，图片是在线的，原理简单好懂！

效果





源码

<!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实现图片预览翻页的更多相关文章

  1. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  2. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  3. js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  5. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  6. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  7. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  8. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  10. Jquery OR Js 实现图片预览

    Jquery方法一: <!DOCTYPE html> <html> <head>     <title></title>     <s ...

随机推荐

  1. Puppeteer+RabbitMQ：Node.js 批量加工pdf服务架构设计与落地

    全文约8500字,阅读时长约10分钟. 智慧作业最近上线「个性化手册」(简称个册)功能,一份完整的个性化手册分为三部分: •学情分析:根据学生阶段性的学习和考试情况进行学情分析.归纳.总结,汇总学情数 ...

  2. UE4 内存写坏导致异常崩溃问题记录

    1. 问题表现 经常出现进程崩溃,崩溃堆栈较为底层 原因基本上都是 read write memory 时触发了异常,盘查后初步怀疑是内存写坏了. 2. 排查期 UE 支持各种内存分配器: TBB A ...

  3. [C++核心编程] 4.2、类和对象-对象的初始化和清理

    文章目录 4.2 对象的初始化和清理 4.2.1 构造函数和析构函数 4.2.2 构造函数的分类及调用 4.2.3 拷贝构造函数调用时机 4.2.4 构造函数调用规则 4.2.5 深拷贝与浅拷贝 4. ...

  4. 【Python基础】变量的作用域与global、nonlocal

    在 Python 中,变量的作用域指的是变量可以被访问的范围.Python 中的变量作用域有两种: 局部作用域:变量在函数函数内部的时候,只能在函数内部使用.这样的变量被称为局部变量. 如果在函数内部 ...

  5. 【Python基础】字符串的基本使用

    b6f9d807-edb2-4e0a-b554-fae322343bee 字符串是Python中最基本的数据类型之一.它是由一系列字符组成的不可变序列.这意味着一旦创建了一个字符串,就不能直接修改它的 ...

  6. MySQL(Zip版)安装配置

    MySQL官网下载地址:MySQL 将压缩包内文件夹解压至任意目录,以mysql-5.7.40版本为例 第一步 添加环境变量 将mysql-5.7.40-winx64文件夹内的bin文件夹添加到环境变 ...

  7. Hugging News #0512: 🤗 Transformers、🧨 Diffusers 更新，AI 游戏是下个新热点吗

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  8. Visual Studio2019打开电脑摄像头

    #include<iostream> //opencv头文件 #include<opencv2/opencv.hpp> using namespace std; using n ...

  9. Tomcat请求处理流程与源码浅析

    系列文章目录和关于我 一丶Connector 在tomcat中,Connector负责开启socket并且监听客户端请求,返回响应数据. 其中: Endpoint:tomcat中没有这个接口,只有Ab ...

  10. Linux 下的动态库、静态库与环境变量

    最近这几天在处理集群软件的过程中,遇到各种各样的库和环境变量的问题,被虐的不清!趁此机会,整理了一下 Linux 下静态库.动态库(共享库)和环境变量的一些知识,与大家共享一下. 库的种类 Linux ...