jQuery是一種流行的JavaScript庫，廣泛用于網頁開發。在網站開發中，購物車是非常重要的一部分，jQuery購物車圖片功能可以實現更加美觀的購物體驗。

$document.ready(function() {
// 為購物車添加商品
$('.add-to-cart').click(function() {
var item = $(this).closest('.item'); // 找到對應商品
var itemImg = item.find('img').attr('src'); // 獲取商品圖片地址
var itemName = item.find('.item-name').text(); // 獲取商品名稱
var itemPrice = item.find('.item-price').text(); // 獲取商品價格
// 創建商品項
var cartItem = $('<div class="cart-item"></div>');
var cartItemImage = $('<img>').attr('src', itemImg);
var cartItemName = $('<p></p>').text(itemName);
var cartItemPrice = $('<p></p>').text(itemPrice);
// 添加商品項到購物車
cartItem.append(cartItemImage);
cartItem.append(cartItemName);
cartItem.append(cartItemPrice);
$('.cart-items').append(cartItem);
// 更新購物車總價和數量
updateCart();
});
// 刪除購物車商品項
$(document).on('click', '.cart-item-remove', function() {
$(this).closest('.cart-item').remove();
updateCart();
});
// 更新購物車總價和數量
function updateCart() {
var totalItems = $('.cart-item').length;
var totalPrice = 0;
$('.cart-item').each(function() {
var price = $(this).find('.cart-item-price').text();
totalPrice += parseFloat(price.replace('$', ''));
});
$('.cart-total-items').text(totalItems);
$('.cart-total-price').text('$' + totalPrice.toFixed(2));
}
});

以上代碼實現了jQuery購物車圖片功能。當用戶點擊商品的“添加到購物車”按鈕時，程序會從商品列表中獲取商品圖片地址、名稱和價格，然后創建一個購物車商品項并添加到購物車列表中。同時，購物車總價和數量也會隨之更新。當用戶點擊購物車商品項的“刪除”按鈕時，相應商品項會從購物車中刪除并更新總價和數量。

使用jQuery購物車圖片功能可以讓用戶更加直觀地了解購物車內的商品情況，提升網站的用戶體驗。