<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情页</title>
<style>
/* 基本布局 */
.unique-container {
display: flex;
width: 88%;
margin: 0 auto;
}
.unique-left-section {
width: 120px;
padding: 20px;
padding-right: 0;
box-sizing: border-box;
overflow: hidden;
font-size: 14px;
}
.unique-right-section {
flex: 1;
padding: 20px;
padding-left: 10px;
display: flex;
align-items: flex-start;
justify-content: center;
}
/* 轮播图 */
.unique-carousel {
display: flex;
align-items: center;
}
.unique-thumbnails {
display: flex;
flex-direction: column;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #ccc #f1f1f1;
}
.unique-thumbnails {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.unique-thumbnails::-webkit-scrollbar {
display: none;
}
.unique-thumbnails img {
width: calc(100% - 4px);
margin-bottom: 20px;
cursor: pointer;
}
.unique-thumbnails img.highlighted {
border: 2px solid #000;
}
.unique-images {
flex: 1;
position: relative;
height: 100%;
}
.unique-images img {
width: 100%;
height: auto;
max-height: 100%;
display: none;
}
.unique-images img.visible {
display: block;
}
/* SKU选择 */
.unique-sku-options {
display: flex;
margin-top: 10px;
}
.unique-sku-option {
padding: 6px 12px;
border: 1px solid #e8e8e1;
margin-right: 10px;
cursor: pointer;
}
.unique-sku-option.selected {
border:2px solid #dd8c3280;
}
/* 数量选择 */
.unique-quantity {
display: flex;
align-items: center;
border:1px solid #e8e8e1
}
.unique-quantity-button {
padding: 6px;
cursor: pointer;
background: transparent;
border: none;
font-size: 20px;
}
.unique-quantity input {
width: 100px;
padding: 0;
margin: 0;
border: none;
text-align: center;
outline: none;
}
/* 加入购物车按钮 */
.unique-add-to-cart {
background-color: #dd8c32;
color: #fff;
padding: 15px 30px;
border: none;
cursor: pointer;
background: #dd8c32;
border: 1px solid transparent;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: .3em;
line-height: 1.42;
margin: 0;
min-width: 90px;
padding: 11px 20px;
text-align: center;
margin-left: 20px;
}
.unique-add-to-cart:hover{
background-color: #000;
transition:all 0.5s;
color: #fff;
}
/* 手风琴效果 */
.unique-accordion-item {
/* margin-top: 20px; */
}
.unique-accordion-header {
position: relative;
padding: 15px 0;
cursor: pointer;
border-top: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-arrow {
display: inline-block;
width: 6px;
height: 6px;
border: 1px solid #000;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(-135deg);
transition: border-top-color 0.3s;
}
.unique-accordion-header.active .accordion-arrow {
width: 6px;
height: 6px;
border: 1px solid #000;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(45deg);
transition: border-top-color 0.3s;
}
.unique-accordion-content {
display: none;
border-top: none;
}
.unique-accordion-header.active + .unique-accordion-content {
display: block;
}
.unique-left-container {
display: flex;
flex: 1;
}
.unique-right-container {
flex: 1;
padding-left: 35px;
}
.unique-right-container h1{
word-wrap: break-word;
margin-bottom: 10px;
font-size: 28px;
}
.fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
overflow: hidden;
flex-direction: column;
}
.fullscreen img {
max-width: 90%;
max-height: 90%;
position: relative;
}
.fullscreen-controls {
position: absolute;
bottom: 12%;
display: flex;
align-items: center;
justify-content: center;
width: 12%;
}
.fullscreen-button {
background: #fff;
border: none;
color: #000;
cursor: pointer;
font-size: 18px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.fullscreen-button.left, .fullscreen-button.right {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.fullscreen-button.left {
left: 0px;
}
.fullscreen-button.right {
right: 0px;
}
.fullscreen-button.close {
position: absolute;
top: -26px;
/* right: 50%; */
background: #fff;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.unique-quantity-bg{
display: flex;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="unique-container">
<div class="unique-left-container">
<div class="unique-left-section">
<!-- 缩略图 -->
<div class="unique-thumbnails" id="unique-thumbnails-container">
<img src="./img/coloth.webp" alt="Thumbnail 1" class="highlighted"> <!-- 默认选中 -->
<img src="./img/coloth1.webp" alt="Thumbnail 2">
<img src="./img/coloth.webp" alt="Thumbnail 3">
<img src="./img/coloth1.webp" alt="Thumbnail 4">
<img src="./img/coloth1.webp" alt="Thumbnail 5">
<img src="./img/coloth.webp" alt="Thumbnail 6">
<img src="./img/coloth1.webp" alt="Thumbnail 7">
<img src="./img/coloth1.webp" alt="Thumbnail 8">
<img src="./img/coloth.webp" alt="Thumbnail 9">
<img src="./img/coloth1.webp" alt="Thumbnail 10">
</div>
</div>
<div class="unique-right-section">
<!-- 轮播图 -->
<div class="unique-carousel">
<div class="unique-images" id="unique-image-container">
<img src="./img/coloth.webp" alt="Image 1" class="visible"> <!-- 默认显示 -->
<img src="./img/coloth1.webp" alt="Image 2">
<img src="./img/coloth.webp" alt="Image 3">
<img src="./img/coloth1.webp" alt="Image 4">
<img src="./img/coloth1.webp" alt="Image 5">
<img src="./img/coloth.webp" alt="Image 6">
<img src="./img/coloth1.webp" alt="Image 7">
<img src="./img/coloth1.webp" alt="Image 8">
<img src="./img/coloth.webp" alt="Image 9">
<img src="./img/coloth1.webp" alt="Image 10">
</div>
</div>
</div>
</div>
<div id="fullscreen-container" class="fullscreen" style="display: none;">
<img id="fullscreen-image" src="" alt="Full Screen Image">
<div class="fullscreen-controls">
<button class="fullscreen-button left"><</button>
<button class="fullscreen-button close">×</button>
<button class="fullscreen-button right">></button>
</div>
</div>
<div class="unique-right-container">
<!-- 商品详情 -->
<h1>绵面独特印花口袋阔腿裤</h1>
<p class="unique-price">$36.88 USD</p>
<div class="unique-sku">
<p>颜色: 多色</p>
<div class="unique-sku-options">
</div>
<p>尺寸: </p>
<div class="unique-sku-options">
<div class="unique-sku-option selected">S</div>
<div class="unique-sku-option">M</div>
<div class="unique-sku-option">L</div>
<div class="unique-sku-option">XL</div>
<div class="unique-sku-option">XXL</div>
<div class="unique-sku-option">3XL</div>
</div>
</div>
<p>数量: </p>
<div class="unique-quantity-bg">
<div class="unique-quantity">
<button class="unique-quantity-button">-</button>
<input value="1" min="1" class="unique-quantity-input">
<button class="unique-quantity-button">+</button>
</div>
<button class="unique-add-to-cart">加入购物车</button>
</div>
<!-- 手风琴效果 -->
<div class="unique-accordion">
<div class="unique-accordion-item">
<div class="unique-accordion-header">
产品描述
<span class="accordion-arrow"></span>
</div>
<div class="unique-accordion-content">
<p>这里是产品描这里是产品描述内容这里是产品描述内容这里是产品描述
这里是产品描述内容这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容
内容这里是产品描述内容这里是产品描述
内容这里是产品描述内容这里是产品描述
内容这里是产品描述内容述内容。这里是产品描述内容
这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容
这里是产品描述内容这里是产品描述内容</p>
这里是产品描述内容这里是产品描述内容
</div>
</div>
<div class="unique-accordion-item">
<div class="unique-accordion-header">
详细信息
<span class="accordion-arrow"></span>
</div>
<div class="unique-accordion-content">
<p>这里是详细信息内容。</p>
</div>
</div>
<div class="unique-accordion-item">
<div class="unique-accordion-header">
送货与退货
<span class="accordion-arrow"></span>
</div>
<div class="unique-accordion-content">
<p>这里是送货与退货内容。</p>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 轮播图切换
const thumbnails = document.querySelectorAll('.unique-thumbnails img');
const images = document.querySelectorAll('.unique-images img');
const fullscreenContainer = document.getElementById('fullscreen-container');
const fullscreenImage = document.getElementById('fullscreen-image');
let thumbnailsdex = 0;
// 默认展示第一张图片
if (images.length > 0) {
images[0].classList.add('visible');
}
if (thumbnails.length > 0) {
thumbnails[0].classList.add('highlighted');
}
thumbnails.forEach((thumbnail, index) => {
thumbnail.addEventListener('click', function () {
images.forEach(img => img.classList.remove('visible'));
thumbnails.forEach(thumb => thumb.classList.remove('highlighted'));
images[index].classList.add('visible');
thumbnail.classList.add('highlighted');
});
});
// SKU选择
const skuOptions = document.querySelectorAll('.unique-sku-option');
skuOptions.forEach(option => {
option.addEventListener('click', function () {
skuOptions.forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
});
});
// 加减按钮控制数量输入
const quantityInput = document.querySelector('.unique-quantity-input');
const minusButton = document.querySelector('.unique-quantity-button:first-child');
const plusButton = document.querySelector('.unique-quantity-button:last-child');
minusButton.addEventListener('click', function() {
let currentValue = parseInt(quantityInput.value);
if (currentValue > 1) {
quantityInput.value = currentValue - 1;
}
});
plusButton.addEventListener('click', function() {
let currentValue = parseInt(quantityInput.value);
quantityInput.value = currentValue + 1;
});
// 防止用户直接输入小于1的值
quantityInput.addEventListener('input', function() {
if (quantityInput.value < 1) {
quantityInput.value = 1;
}
});
// 手风琴效果
const accordionHeaders = document.querySelectorAll('.unique-accordion-header');
accordionHeaders.forEach(header => {
header.addEventListener('click', function () {
const content = this.nextElementSibling;
const isActive = this.classList.contains('active');
// 切换当前项
if (isActive) {
this.classList.remove('active');
content.style.display = 'none';
} else {
this.classList.add('active');
content.style.display = 'block';
}
});
});
// 调整缩略图容器高度以匹配大图容器
function adjustThumbnailHeight() {
const imageContainer = document.getElementById('unique-image-container');
const thumbnailsContainer = document.getElementById('unique-thumbnails-container');
thumbnailsContainer.style.height = imageContainer.clientHeight + 'px';
}
// 调整一次高度
adjustThumbnailHeight();
// 窗口调整时重新计算高度
window.addEventListener('resize', adjustThumbnailHeight);
// 点击大图全屏显示
images.forEach((img, index) => {
img.addEventListener('click', function () {
thumbnailsdex = index;
fullscreenImage.src = this.src;
fullscreenContainer.style.display = 'flex';
});
});
// 关闭全屏显示
document.querySelector('.fullscreen-button.close').addEventListener('click', function () {
fullscreenContainer.style.display = 'none';
});
// 切换到下一张图片
document.querySelector('.fullscreen-button.right').addEventListener('click', function () {
thumbnailsdex = (thumbnailsdex + 1) % images.length;
fullscreenImage.src = images[thumbnailsdex].src;
});
// 切换到上一张图片
document.querySelector('.fullscreen-button.left').addEventListener('click', function () {
thumbnailsdex = (thumbnailsdex - 1 + images.length) % images.length;
fullscreenImage.src = images[thumbnailsdex].src;
});
// 关闭全屏显示(点击全屏容器以外区域)
fullscreenContainer.addEventListener('click', function (event) {
if (event.target === fullscreenContainer) {
fullscreenContainer.style.display = 'none';
}
});
});
</script>
</body>
</html>
点击左边缩略图放大(详情页)
于 2024-08-14 16:17:13 首次发布