<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="spm_prefix" content="333.851">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="viewport" content="width=1300">
<link href="./js/viewer/viewer.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/4.5.0/css/swiper.min.css">
<script src="./js/jquery-1.10.2.js"></script>
<script src="./js/viewer/viewer.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/base.css">
</head>
<style type="text/css">
</style>
<body>
<div class="dasai-sec dasai-sec2">
<div class="m">
<p class="tips">--</p>
<div class="cont">
<div class="swiper mySwiper">
<div class="swiper-wrapper" id="swiper" >
<div class="swiper-slide ">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656173460244-faad38c026e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656173460244-faad38c026e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656380605767-28a92b240053?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656380605767-28a92b240053?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656145076222-d43e10c4338f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656145076222-d43e10c4338f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656147084224-3ec22fbd3e96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656147084224-3ec22fbd3e96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656328670689-06f48c226aaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656328670689-06f48c226aaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1656329020255-b5b450d45704?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1656329020255-b5b450d45704?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" class="see">
</div>
</div>
</div>
<div class="swiper-slide">
<div class="pic" style="background-image:url('https://images.unsplash.com/photo-1655853494101-712187ddd4e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80')">
<div class="cover">
<i class="icon icon-imgs"></i>
<p>查看大图</p>
<img src="https://images.unsplash.com/photo-1655853494101-712187ddd4e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" class="see">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</body>
<script type='text/javascript'>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 4,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay : {
delay:3000
},
});
/*查看大图*/
var image = new Viewer(document.getElementById('swiper'), {
button: true,
navbar: false,
width: 660,
title: false
});
</script>
</html>
jQuery图片查看器代码.rar
版权申诉
135 浏览量
2023-10-01
23:43:09
上传
评论
收藏 90KB RAR 举报
jQuery图片查看器代码.rar （14个子文件） 
jb115 js viewer 
viewer.min.js 36KB viewer.min.css 8KB
index.html 1009B jquery-1.10.2.js 318B swiper-bundle.min.js 136KB jquery.min.js 94KB css base.css 4KB swiper.min.css 19KB index.html 7KB images 
big.png 606B left.png 380B right-sel.png 354B right.png 381B left-sel.png 336B资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5837
最新资源
- 论文(最终)_20240430235101.pdf
- 基于python编写的Keras深度学习框架开发，利用卷积神经网络CNN,快速识别图片并进行分类
- 最全空间计量实证方法（空间杜宾模型和检验以及结果解释文档）.txt
- 5uonly.apk
- 蓝桥杯Python组的历年真题
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 2023-04-06-项目笔记 - 第一百十九阶段 - 4.4.2.117全局变量的作用域-117 -2024.04.30
- 前端开发技术实验报告：内含4四实验&实验报告
- Highlight Plus v20.0.1
- 林周瑜-论文.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
