<!DOCTYPE html>
<html>
<head>
<title>测试图片插件</title>
<link rel="stylesheet" href="css/viewer2.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="js/viewer-jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#viewer').viewer({
url:"data-original",
fullscreen: 'true'
});
$('#viewer2').viewer({
url:"data-original",
fullscreen: 'true'
});
})
</script>
</head>
<body>
<ul id="viewer">
<li><img src="img/tibet-1.jpg" data-original="img/original/tibet-1.jpg" alt="图片1"></li>
<li><img src="img/tibet-2.jpg" data-original="img/original/tibet-2.jpg" alt="图片2"></li>
<li><img src="img/tibet-3.jpg" data-original="img/original/tibet-3.jpg" alt="图片3"></li>
<li><img src="img/tibet-4.jpg" data-original="img/original/tibet-4.jpg" alt="图片4"></li>
<li><img src="img/tibet-5.jpg" data-original="img/original/tibet-5.jpg" alt="图片5"></li>
<li><img src="img/tibet-6.jpg" data-original="img/original/tibet-6.jpg" alt="图片6"></li>
</ul>
<hr>
<div id="viewer2">
<img src="img/tibet-1.jpg" data-original="img/original/tibet-1.jpg" alt="图片1">
<img src="img/tibet-2.jpg" data-original="img/original/tibet-2.jpg" alt="图片2">
<img src="img/tibet-3.jpg" data-original="img/original/tibet-3.jpg" alt="图片3">
<img src="img/tibet-4.jpg" data-original="img/original/tibet-4.jpg" alt="图片4">
<img src="img/tibet-5.jpg" data-original="img/original/tibet-5.jpg" alt="图片5">
<img src="img/tibet-6.jpg" data-original="img/original/tibet-6.jpg" alt="图片6">
</ul>
</body>
</html>
viewer.js图片放大、缩小、旋转插件
最新推荐文章于 2023-05-11 11:04:37 发布
873
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
