https://blog.csdn.net/qq_29132907/article/details/80136023

一、效果图  
二、代码
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >    <link rel="stylesheet" href="viewer.min.css">    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="viewer.min.js"></script>    <style type="text/css">        .outer{            width: 500px;            height: 500px;            margin: 0 auto;        }        img{            width:100%;            height: 400px;        }    </style></head><body>    <!-- <div class="outer">        <ul id="viewer">            <li><img src="img/1.jpg" data-original="img/1.jpg" alt="图片1"></li>            <li><img src="img/2.jpg" data-original="img/2.jpg" alt="图片2"></li>            <li><img src="img/3.jpg" data-original="img/3.jpg" alt="图片3"></li>            <li><img src="img/4.jpg" data-original="img/4.jpg" alt="图片4"></li>            <li><img src="img/5.jpg" data-original="img/5.jpg" alt="图片5"></li>            <li><img src="img/6.jpg" data-original="img/6.jpg" alt="图片6"></li>        </ul>    </div> --><div class="outer"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- Indicators -->  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>  </ol>
  <!-- Wrapper for slides -->  <div id="viewer" class="carousel-inner" role="listbox">    <li class="item active">     <img src="img/1.jpg" data-original="img/1.jpg" alt="图片1">      <div class="carousel-caption">        ...      </div>    </li>    <li class="item">     <img src="img/2.jpg" data-original="img/2.jpg" alt="图片2">      <div class="carousel-caption">        ...      </div>    </li>    <li class="item">    <img src="img/3.jpg" data-original="img/3.jpg" alt="图片3">      <div class="carousel-caption">        ...      </div>    </li>    ...  </div>
  <!-- Controls -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>    <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>    <span class="sr-only">Next</span>  </a></div>  </div><script type="text/javascript">    $('.carousel').carousel()    //$('#viewer').viewer();    $('#viewer').viewer({        url:"data-original",        //inline:"true",        //navbar:"true"    });</script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687三、使用说明
一、使用说明<link rel="stylesheet" href="css/viewer.min.css"><script src="js/viewer.min.js"></script>二、<ul id="viewer">    <li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图片1"></li>    <li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图片2"></li>    <li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图片3"></li>    <li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图片4"></li>    <li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图片5"></li>    <li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图片6"></li></ul>三、$('#viewer').viewer();
四、说明插件默认会取图片的src地址。如果想要放大之后换一张大图的话，可以把大图的路径写在data-original属性中，然后设置url : "data-original" 。alt用来存放图片的标题。
 五、$('#viewer').viewer({url:"data-original"});
名称  类型  默认值 说明inline  布尔值 false   启用 inline 模式button  布尔值 true    显示右上角关闭按钮（jQuery 版本无效）navbar  布尔值/整型  true    显示缩略图导航title   布尔值/整型  true    显示当前图片的标题（现实 alt 属性及图片尺寸）toolbar 布尔值/整型  true    显示工具栏tooltip 布尔值 true    显示缩放百分比movable 布尔值 true    图片是否可移动zoomable    布尔值 true    图片是否可缩放rotatable   布尔值 true    图片是否可旋转scalable    布尔值 true    图片是否可翻转transition  布尔值 true    使用 CSS3 过度fullscreen  布尔值 true    播放时是否全屏keyboard    布尔值 true    是否支持键盘interval    整型  5000    播放间隔，单位为毫秒zoomRatio   浮点型 0.1 鼠标滚动时的缩放比例minZoomRatio    浮点型 0.01    最小缩放比例maxZoomRatio    数字  100 最大缩放比例zIndex  数字  2015    设置图片查看器 modal 模式时的 z-indexzIndexInline    数字  0   设置图片查看器 inline 模式时的 z-indexurl 字符串/函数  src 设置大图片的 urlbuild   函数  null    回调函数，具体查看演示built   函数  null    回调函数，具体查看演示show    函数  null    回调函数，具体查看演示shown   函数  null    回调函数，具体查看演示hide    函数  null    回调函数，具体查看演示hidden  函数  null    回调函数，具体查看演示view    函数  null    回调函数，具体查看演示viewed  函数  null    回调函数，具体查看演示 --------------------- 作者：唐策 来源：CSDN 原文：https://blog.csdn.net/qq_29132907/article/details/80136023 版权声明：本文为博主原创文章，转载请附上博文链接！

Viewer.js 是一款强大的 jQuery 图像浏览插件。的更多相关文章

  1. Viewer 是一款强大的 jQuery 图像浏览插件。

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及g ...

  2. viewer.js--一个强大的jQuery图像查看插件

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 查看演示      立即下载 部分插 ...

  3. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  4. 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  5. 15款最好的 jQuery 网格布局插件

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  6. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  7. 分享8款精美的jQuery图片播放插件

    本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5 ...

  8. 5 款最新的 jQuery 图片裁剪插件

    这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...

  9. 分享一款强大的图片查看器插件，手机PC 通吃，功能超级齐全！

    一款强大的图片查看器插件,手机PC 通吃,功能超级齐全! 地址:http://photoswipe.com/

随机推荐

  1. python学习day5 常量 运算符补充 流程控制基础

    1.常量 值不会改变的量 python中没有特别的语法定义常量,一般约定用全大写字母命名常量,比如圆周率pi 2.预算符补充 2.1算数运算符 print(10/3)除法运算 print(10//3) ...

  2. oracle中sequence（自增序号）的用法

    转载:https://www.cnblogs.com/liuzy2014/p/5794928.html 在oracle中sequence就是序号,每次取的时候它会自动增加.sequence与表没有关系 ...

  3. Jenkins+sonar7.3集成

    Jenkins安装请参考:https://blog.csdn.net/CheNorton/article/details/50327825?utm_source=copy Jenkins更新请参考:h ...

  4. ZOJ2018/4月月赛G题Traffic Light（广搜）

    题意:首先T组数据,每组数据包括:第一行:一个n,m,然后下面有一个n行m列的01矩阵. 最后一行输入四个数字,分别是起点的横纵坐标,终点的横纵坐标.询问从起点到终点,最少要几步,如果到不了输出-1 ...

  5. mysql数据库导出CSV乱码问题

    一.导出汉字为乱码 1. 鼠标右键点击选中的 csv 文件,在弹出的菜单中选择“编辑”,则系统会用文本方 式(记事本)打开该 csv 文件: 2. 打开 csv 文件后,进行“另存为”操作,在弹出的界 ...

  6. django的优缺点（非原创）

    Django 大包大揽,用它来快速开发一些 Web 应用是不错的.如果你顺着 Django 的设计哲学来,你会觉得 Django 很好用,越用越顺手:相反,你如果不能融入或接受 Django 的设计哲 ...

  7. Python开发【第三篇】：Python函数

    set     无序,不重复,可嵌套. 函数     创建函数:     1.def关键字,创建函数     2.函数名     3.()     4.函数体     5.返回值 发邮件函数 def ...

  8. 用脚手架创建vue项目

    .创建文件地址 首先创建一个文件夹,我用的HBuilder编辑器 , 然后把文件夹拖入编辑器 , 在你创建的文件夹里面打开cmd 2.输入安装命令 : 1). npm install --global ...

  9. swift - 指定VC隐藏导航栏 - 禁用tabbar的根控制器手势，防止两个tabbar跳转 手势冲突

    1. viewdidload 设置代理 self.navigationController?.delegate = self 2.代理里面指定VC 隐藏 //MARK: - 导航栏delegate e ...

  10. Java_10.1继承应用

    /*   *  描述学生和工人两个类   name  age进行抽取 ,父类 Person 提供set   get   *  同时创建学生和工人对象  必须明确年龄和姓名  并且控制台输出 * */ ...