我来为你讲解一下。首先，我们需要了解什么是jQuery以及图片查看器。
jQuery是一个快速、简洁的JavaScript库，可以封装诸多常用的JavaScript功能和特效，并且其使用非常简单方便。而图片查看器就是指能够对图片进行预览与切换的一种小型应用程序。下面描述一下实现这个功能的步骤：
步骤一：引入jQuery库文件
首先需要在代码的头部引入jQuery库文件，可以直接从官网下载最新版本的jQuery，也可以选择使用CDN加速服务，如下：
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
步骤二：设置HTML结构
参考以下代码：
<div class="container">
<div class="preview"><img src="img/1.jpg"></div>
<div class="thumbnails">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
</div>
以上即是查看器的基础HTML结构，其中.container和.preview是容器和预览图的类名，.thumbnails是所有缩略图的父级容器。
步骤三：实现切换缩略图
参考以下代码：
$(document).ready(function () {
$(".thumbnails img").click(function () {
var imgSrc = $(this).attr("src");
$(".preview img").attr("src", imgSrc);
});
});
以上代码实现的是当用户点击缩略图时，将其对应的图片路径传入预览图中。
步骤四：实现切换预览图
参考以下代码：
$(document).ready(function () {
$(".arrow-left").click(function () {
var currentImg = $(".preview img").attr("src");
var currentThumbnail = $(".thumbnails img[src='" + currentImg + "']");
var prevThumbnail = currentThumbnail.prev();
if (prevThumbnail.length) {
var prevImg = prevThumbnail.attr("src");
$(".preview img").attr("src", prevImg);
}
});
$(".arrow-right").click(function () {
var currentImg = $(".preview img").attr("src");
var currentThumbnail = $(".thumbnails img[src='" + currentImg + "']");
var nextThumbnail = currentThumbnail.next();
if (nextThumbnail.length) {
var nextImg = nextThumbnail.attr("src");
$(".preview img").attr("src", nextImg);
}
});
});
以上代码实现的是左右箭头用来切换预览图，当点击某个箭头时，找到当前预览图在缩略图中的位置，然后取出前一个或后一个缩略图的图片路径，将其传入预览图中。
示例一：纯CSS实现的小型图片查看器
以下是一段将以上代码完整实现的小型图片查看器示例（也可以参照官网上的代码示例）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片查看器</title>
<style type="text/css">
.container {
width: 600px;
margin: 0 auto;
}
.preview {
text-align: center;
margin-bottom: 20px;
}
.preview img {
max-width: 100%;
max-height: 400px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.thumbnails {
display: flex;
justify-content: space-between;
}
.thumbnails img {
width: 150px;
height: 100px;
object-fit: cover;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
.arrow {
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
font-size: 40px;
color: #555;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all .2s ease-in-out;
z-index: 1;
}
.arrow:hover {
color: #f60;
transform: scale(1.2);
}
.arrow-left {
left: -20px;
}
.arrow-right {
right: -20px;
}
</style>
</head>
<body>
<div class="container">
<div class="arrow arrow-left"><</div>
<div class="preview"><img src="img/1.jpg"></div>
<div class="thumbnails">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>
<div class="arrow arrow-right">></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".thumbnails img").click(function () {
var imgSrc = $(this).attr("src");
$(".preview img").attr("src", imgSrc);
});
$(".arrow-left").click(function () {
var currentImg = $(".preview img").attr("src");
var currentThumbnail = $(".thumbnails img[src='" + currentImg + "']");
var prevThumbnail = currentThumbnail.prev();
if (prevThumbnail.length) {
var prevImg = prevThumbnail.attr("src");
$(".preview img").attr("src", prevImg);
}
});
$(".arrow-right").click(function () {
var currentImg = $(".preview img").attr("src");
var currentThumbnail = $(".thumbnails img[src='" + currentImg + "']");
var nextThumbnail = currentThumbnail.next();
if (nextThumbnail.length) {
var nextImg = nextThumbnail.attr("src");
$(".preview img").attr("src", nextImg);
}
});
});
</script>
</body>
</html>
示例二：基于hidden实现的大型图片查看器
以下是一段利用hidden属性实现图片查看器的代码示例，第一次打开时需要一定的加载时间。该示例可以用于多张高分辨率图片的浏览。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片查看器</title>
<style type="text/css">
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-size: 1.6rem;
}
#header {
background-color: #f60;
text-align: center;
color: #fff;
padding: 2rem;
margin-bottom: 2rem;
font-size: 3rem;
font-weight: bold;
}
#viewer {
margin: auto;
width: 100%;
max-width: 1400px;
text-align: center;
position: relative;
overflow: hidden;
}
#viewer img {
max-width: 100%;
max-height: 600px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
#thumbnails {
display: flex;
justify-content: space-between;
width: 100%;
margin: 2rem 0;
overflow: auto;
white-space: nowrap;
}
#thumbnails img {
width: 200px;
height: 150px;
object-fit: cover;
cursor: pointer;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
#preloader {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="header">图片查看器</div>
<div id="viewer">
<img src="img/1.jpg" id="current-img" alt="图片查看器">
<div id="preloader"><img src="img/loader.gif" alt="加载中"></div>
<div id="thumbnails"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var imgList = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg"];
var currentIndex = 0;
var imgObj = new Image();
var imgWidth;
var imgHeight;
var loaded = 0;
var targetLoaded = 0;
for (var i in imgList) {
var img = new Image();
$(img).on("load", function () {
loaded++;
if (loaded == imgList.length) {
$("#preloader").hide();
}
});
img.src = imgList[i];
var element = $("<img src='" + imgList[i] + "' data-index='" + i + "'>");
element.appendTo($("#thumbnails"));
$(element).click(function () {
switchToIndex($(this).data("index"));
});
}
$(imgObj).on("load", function () {
imgWidth = this.width;
imgHeight = this.height;
targetLoaded++;
if (targetLoaded == 2) {
centerTheImage();
}
});
imgObj.src = imgList[0];
$("#preloader").show();
function switchToIndex(index) {
currentIndex = index;
imgObj.src = imgList[currentIndex];
$("#preloader").show();
var activeThumbnail = $("#thumbnails img.active");
activeThumbnail.removeClass("active");
$("img[data-index='" + currentIndex + "']").addClass("active");
}
function centerTheImage() {
var viewerWidth = $("#viewer").width();
var viewerHeight = $("#viewer").height();
var xPos = (viewerWidth - imgWidth) / 2;
var yPos = (viewerHeight - imgHeight) / 2;
$("#current-img").css({
"left": xPos + "px",
"top": yPos + "px"
});
}
function checkArrows() {
if (currentIndex == 0) {
$("#previous-arrow").addClass("disabled");
} else {
$("#previous-arrow").removeClass("disabled");
}
if (currentIndex == imgList.length - 1) {
$("#next-arrow").addClass("disabled");
} else {
$("#next-arrow").removeClass("disabled");
}
}
$("#previous-arrow").on("click", function () {
if (currentIndex > 0) {
switchToIndex(currentIndex - 1);
}
});
$("#next-arrow").on("click", function () {
if (currentIndex < imgList.length - 1) {
switchToIndex(currentIndex + 1);
}
});
$(window).on("resize", function () {
centerTheImage();
});
});
</script>
</body>
</html>
以上两个示例均来自菜鸟教程，以此作为参考，我们可以形成自己的图片查看器方案。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现简单的图片查看器 - Python技术站
微信扫一扫 
支付宝扫一扫 