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 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！