【Jquery简易图床源码】
以下是一个使用jQuery简化的图床示例代码，它展示了如何使用jQuery来简化和优化JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Image Gallery with jQuery</title>
<style>
#gallery img {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<div id="gallery">
<img class="active" src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<!-- More images... -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#gallery img').click(function() {
var imgSrc = $(this).attr('src');
$('#gallery img').removeClass('active').filter(function() {
return this.src === imgSrc;
}).addClass('active');
});
});
</script>
</body>
</html>这段代码实现了一个简单的图片画廊，用户可以通过点击图片来切换显示的图片。jQuery被用来处理事件绑定和类的添加移除，使得代码更加简洁和易于维护。
评论已关闭