原文地址

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

效果





源码

<!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. T-SQL基础教程Day3

    第三章 联接3.1交叉联接交叉联接是最简单的联接类型.交叉联接仅执行一个逻辑查询处理阶段--笛卡尔乘积将一个输入表的每一行与另一个表的所有行匹配SQL Server支持交叉联接的两种标准语法:ANSI ...

  2. 【深度思考】聊聊CGLIB动态代理原理

    1. 简介 CGLIB的全称是:Code Generation Library. CGLIB是一个强大的.高性能.高质量的代码生成类库,它可以在运行期扩展Java类与实现Java接口, 底层使用的是字 ...

  3. Nginx的负载均衡策略

    Nginx的负载均衡策略 个人博客地址: https://note.raokun.top 拥抱ChatGPT,国内访问网站:https://www.playchat.top 共六种: 轮询.权重.ip ...

  4. Albert理论详解：用矩阵分解与跨层参数共享减少参数量

    1.介绍 Albert是Bert的一个变种,它在Bert的基础上减少了参数量,使整个模型更加的"轻量化",同时也保持了Bert的性能,但值得注意的是,Albert虽然显著地减少了参 ...

  5. 绝对强大的三大linux指令:ar, nm, objdump

    前言 如果普通编程不需要了解这些东西,如果想精确控制你的对象文件的格式或者你想查看一下文件对象里的内容以便作出某种判断,刚你可以看一下下面的工具:objdump, nm, ar.当然,本文不可能非常详 ...

  6. 笔记：C++学习之旅 ---string 类、vector和迭代器

    string 类 #include <iostream> #include <string> using namespace std; int main() {         ...

  7. 数据结构(DataStructure)-03

    数据结构-03 **数据结构-03笔记** **递归** **二叉树** **广度遍历 - 二叉树** **深度遍历 - 二叉树** **二叉树练习一** **二叉树练习二** **二叉排序树练习一* ...

  8. 群论中的 Lagrange 定理

    今天跟 hym 打球时讲到了这个东西,突然发现证明拉格朗日定理的思想有许多跟轨道-稳定集定理很像,所以这里又记录一下. 为了证明 Lagrange 定理,我们需要了解一些关于子群和陪集的性质. 首先给 ...

  9. Node.js卸载与重装

    卸载第一步:打开系统自带的卸载功能,找到node js 进行卸载第二步:删除C:\Users\Administrator\AppData\Roaming文件下的npm.npm-cache或者如果是zi ...

  10. MMCM/PLL VCO

    输入输出时钟频率,input 322.265625Mhz, output 312.5Mhz 对于使用MMCM与PLL的不同情况,虽然输入输出频率是一样的,但是,分/倍频系数是不同的,不能使用同一套参数 ...