jquery图片
使用 jQuery 操作图片
jQuery 提供了多种方法来操作图片，包括加载、显示、隐藏、修改属性等。以下是常见的 jQuery 图片操作方法。
加载图片
通过 jQuery 动态加载图片可以使用 attr() 方法修改 src 属性：
$('#myImage').attr('src', 'path/to/new-image.jpg');显示和隐藏图片
使用 show() 和 hide() 方法控制图片的显示状态：
$('#myImage').show(); // 显示图片
$('#myImage').hide(); // 隐藏图片修改图片属性
可以通过 attr() 方法修改图片的 alt、title 等属性：
$('#myImage').attr('alt', 'New Alt Text');
$('#myImage').attr('title', 'New Title Text');图片预加载
使用 jQuery 预加载图片可以确保图片在需要时已经加载完成：
function preloadImage(url) {
$('<img>').attr('src', url);
}
preloadImage('path/to/image.jpg');图片懒加载
通过监听滚动事件实现图片懒加载：
$(window).scroll(function() {
$('img.lazy').each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
$(this).attr('src', $(this).data('src'));
$(this).removeClass('lazy');
}
});
});图片轮播
使用 jQuery 实现简单的图片轮播效果：
let currentIndex = 0;
const images = $('.slider img');
function showNextImage() {
images.eq(currentIndex).fadeOut();
currentIndex = (currentIndex + 1) % images.length;
images.eq(currentIndex).fadeIn();
}
setInterval(showNextImage, 3000);图片点击事件
为图片添加点击事件：
$('#myImage').click(function() {
alert('Image clicked!');
});图片加载完成事件
监听图片加载完成事件：
$('#myImage').on('load', function() {
console.log('Image loaded successfully');
});图片加载失败处理
监听图片加载失败事件并替换为备用图片：
$('#myImage').on('error', function() {
$(this).attr('src', 'path/to/fallback-image.jpg');
});图片动态创建
使用 jQuery 动态创建并插入图片：
$('<img>', {
src: 'path/to/image.jpg',
alt: 'Dynamic Image',
class: 'dynamic-image'
}).appendTo('#container');图片尺寸调整
获取或设置图片的宽度和高度：
const width = $('#myImage').width();
const height = $('#myImage').height();
$('#myImage').css({ width: '200px', height: 'auto' });图片淡入淡出效果
使用 fadeIn() 和 fadeOut() 实现图片淡入淡出：
$('#myImage').fadeIn(1000); // 淡入
$('#myImage').fadeOut(1000); // 淡出图片动画效果
使用 animate() 方法实现图片动画：
$('#myImage').animate({
opacity: 0.5,
left: '+=50',
height: 'toggle'
}, 1000);图片画廊
实现简单的图片画廊点击放大效果：
$('.gallery img').click(function() {
const src = $(this).attr('src');
$('#lightbox').html('<img src="' + src + '">').fadeIn();
});
$('#lightbox').click(function() {
$(this).fadeOut();
});这些方法涵盖了 jQuery 中常见的图片操作需求，可以根据具体场景选择合适的方法实现功能。
