jquery img
jQuery 操作图片（img）元素的方法
jQuery 提供了多种方法来操作和修改 HTML 中的 <img> 元素。以下是常见的几种用法：
修改图片的 src 属性
使用 .attr() 方法可以修改图片的 src 属性：
$('img').attr('src', 'new-image.jpg');获取图片的 src 属性
同样使用 .attr() 方法可以获取当前图片的 src 值：
var imgSrc = $('img').attr('src');
console.log(imgSrc);预加载图片
使用 Image 对象预加载图片，确保图片加载完成后再显示：
var img = new Image();
img.onload = function() {
$('img').attr('src', img.src);
};
img.src = 'preload-image.jpg';动态创建图片元素
使用 jQuery 动态创建并插入 <img> 元素：
var newImg = $('<img>', {
src: 'dynamic-image.jpg',
alt: 'Dynamic Image',
class: 'img-class'
});
$('body').append(newImg);图片加载事件监听
监听图片的加载完成或加载失败事件：
$('img').on('load', function() {
console.log('Image loaded successfully');
}).on('error', function() {
console.log('Image failed to load');
});图片懒加载
结合 data-src 属性和滚动事件实现懒加载：
<img data-src="lazy-image.jpg" class="lazy">$(window).on('scroll', function() {
$('.lazy').each(function() {
if ($(this).isInViewport()) {
$(this).attr('src', $(this).data('src'));
$(this).removeClass('lazy');
}
});
});图片尺寸操作
获取或设置图片的宽度和高度：
// 获取宽度
var imgWidth = $('img').width();
// 设置高度
$('img').height(200);图片淡入淡出效果
使用 jQuery 动画方法实现图片的淡入淡出：
$('img').fadeOut(500, function() {
$(this).attr('src', 'new-image.jpg').fadeIn(500);
});图片轮播实现
简单的图片轮播示例：
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
var current = 0;
function rotateImage() {
current = (current + 1) % images.length;
$('.slideshow img').fadeOut(500, function() {
$(this).attr('src', images[current]).fadeIn(500);
});
}
setInterval(rotateImage, 3000);图片点击放大
实现点击图片放大显示的效果：
$('img.thumbnail').click(function() {
var largeSrc = $(this).data('large');
$('<div class="lightbox"><img src="' + largeSrc + '"></div>').appendTo('body').click(function() {
$(this).remove();
});
});这些方法涵盖了 jQuery 操作图片元素的常见需求，包括属性修改、事件处理、动态创建和动画效果等。
